1. immediate
- immediate表示立即执行的意思，这样就是说不用等到value变化才会执行，默认的时候就会立刻执行一次。
假设我们页面上有一个搜索框，每次输入内容的时候去请求一个接口，同时一进页面的时候需要调一下这个接口，我们可能一般这样写：
<!--作者：zhangfan
页面名称：watch的immediate和deep-->
<template>
<div id="product-list-one">
<label>
这是一个输入框：
<input type="text" v-model="value" />
</label>
</div>
</template>
<script>
export default {
data() {
return {
value: "zhangfan"
};
},
watch: {
value: "getData"
},
mounted: function() {
this.getData();
},
methods: {
getData: function() {
console.log(this.value);
}
}
};
</script>
<style scoped>
</style>我们将这个输入框的内容绑定一个变量value，同时利用watch去监视value有没有发生变化，如果变化了就是调用getData，然后在mounted里面调用getData，因为已进入的时候需要调用一次。
其实上面的第一次调用getData可以在watch中配置一个immediate，就像这样：
<!--作者：zhangfan
页面名称：watch的immediate和deep-->
<template>
<div id="product-list-one">
<label>
这是一个输入框：
<input type="text" v-model="value" />
</label>
</div>
</template>
<script>
export default {
data() {
return {
value: "zhangfan"
};
},
watch: {
value: {
handler: "getData",
immediate: true
}
},
methods: {
getData: function() {
console.log(this.value);
}
}
};
</script>
<style scoped>
</style>- immediate表示立即执行的意思，这样就是说不用等到value变化才会执行，默认的时候就会立刻执行一次。handler表示需要调用的方法。
2. deep
- 如果我们用watch监视一个对象的时候，往往得不到正确的结果，例如：
<!--作者：zhangfan
页面名称：watch的immediate和deep-->
<template>
<div id="product-list-one">
<label>
这是一个输入框：
<input type="text" v-model="obj.email" />
</label>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
email: "[email protected]"
}
};
},
watch: {
obj: {
handler: "getData"
}
},
methods: {
getData: function() {
console.log(this.obj.email);
}
}
};
</script>
<style scoped>
</style>- 我们定义了一个对象obj，将输入框和obj.email进行绑定，那么我们利用watch去监测obj，那么当输入框输入内容的时候，watch的obj是不会触发的。
- 此时可以用deep，因为用watch去监测obj，只有obj发生变化才会触发，如果是obj.email变化则没反应，如果用deep的话，表示可以监测到obj的下层变动：
<!--作者：zhangfan
页面名称：watch的immediate和deep-->
<template>
<div id="product-list-one">
<label>
这是一个输入框：
<input type="text" v-model="obj.email" />
</label>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
email: "[email protected]"
}
};
},
watch: {
obj: {
handler: "getData",
deep: true
}
},
methods: {
getData: function() {
console.log(this.obj.email);
}
}
};
</script>
<style scoped>
</style>- 但是如果用deep的话，还会有一些副作用，假如obj还有一个age的属性，那么age属性的变动也会被监测到。如果只是想单纯的监测obj.email的变动，直接监测’obj.email’可能会更好：
<!--作者：zhangfan
页面名称：watch的immediate和deep-->
<template>
<div id="product-list-one">
<label>
这是一个输入框：
<input type="text" v-model="obj.email" />
</label>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
email: "[email protected]"
}
};
},
watch: {
"obj.email": {
handler: "getData"
}
},
methods: {
getData: function() {
console.log(this.obj.email);
}
}
};
</script>
<style scoped>
</style>注意,watch中不要用箭头函数，watch观察的对象不能用箭头方法，否则this是undefined。