@芥末的糖-----Vue中watch的使用和优化
2018-12-06 本文已影响0人
芥末的糖
1.使用watch来监听值得变化
没有闲言碎语，直接上代码，接下来是最干的干货！！！
<body>
<div id="root">
<div>
<p>name: {{name}}</p>
<p>name: <input type="text" v-model="name"></p>
</div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#root",
data: {
name: 1
},
watch: {
name(newValue, oldValue) {
console.log(newValue, oldValue)//不打印
}
},
})
</script>
需要给name来一个初始化操作,如下：
watch: {
name(newValue, oldValue) {
console.log(newValue, oldValue)//打印:2 1
}
},
mounted() {
this.name=2
},
高阶用法：handler方法和immediate属性
1.immediate
继续修改watch，如下：
watch: {
name: {
handler(newName, oldName) {
console.log(newName,oldName);//1 undefined
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
},
2.deep
如果我们监听的是一个对象的话：
<body>
<div id="root">
<div>
<p>obj.name: {{obj.name}}</p>
<p>obj.name: <input type="text" v-model="obj.name"></p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#root",
data: {
obj: {
name: 123
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log("obj");//打印：obj
},
immediate: true
}
},
})
</script>
以上如果再修改input框里的值是不会监听到的，如果需要监听到obj.name值的改变的话，修改如下：
watch: {
obj: {
handler(newName, oldName) {
console.log("obj");
},
immediate: true,
deep:true
}
},
以上就会给obj所有子元素绑定watch,修改obj的任何一个元素则会在再次进入watch，例如：
watch: {
obj: {
handler(newName, oldName) {
console.log("obj");//此时会打印两次obj
},
immediate: true,
deep:true
}
},
mounted() {
setTimeout(()=>{
this.obj.name1 = 222
},2000)
},
如果想给某一个子元素绑定的话，如下：
watch: {
"obj.name": {
handler(newName, oldName) {
console.log("obj");//obj
},
immediate: true,
deep:true
}
},
