兼职做海报网站,网站建设个人简历,网站根目录文件名,怎么知道网站的域名Vue#xff1a;侦听属性 watch深度侦听异步任务 watch
在Vue中#xff0c;允许用户在数据改变时#xff0c;做出一定的处理。
语法#xff1a;
new Vue({watch:{属性名:{handler(newValue, oldValue){// 函数体} }}
})当一个属性被写入watch中#xff0c;每当这个属性… Vue侦听属性 watch深度侦听异步任务 watch
在Vue中允许用户在数据改变时做出一定的处理。
语法
new Vue({watch:{属性名:{handler(newValue, oldValue){// 函数体} }}
})当一个属性被写入watch中每当这个属性值修改就会调用对应的handler方法该方法的第一个参数为旧值第二个参数为新值。
示例
div idrootbutton clicknumnum加一/button
/divscript typetext/javascriptconst vm new Vue({el:#root,data:{num: 0},watch:{num:{handler(newValue,oldValue){console.log(oldValue, - , newValue)}}}})
/script以上代码中设置了一个按钮每次点击按钮num。在Vue实例中侦听num属性当num的值发生改变就会调用handler方法。
输出结果 如果加上immediate: true属性那么当整个Vue初始化时也会调用一次侦听属性的方法
const vm new Vue({el:#root,data:{num: 0},watch:{num:{immediate: true,handler(newValue,oldValue){console.log(oldValue, - , newValue)}}}
})输出结果 这次多了一个undefined - 0的过程也就是第一次初始化data.num的过程也触发了侦听属性。
如果侦听属性中不带有任何其他属性只有一个handler可以简写
new Vue({watch:{num(newValue,oldValue){console.log(oldValue, - , newValue)}}
})也就是直接把被侦听的属性num写为一个函数而不是一个对象。 深度侦听
当被侦听的属性是一个对象时修改对象的属性不会触发侦听属性只有整个对象都被替换才会触发侦听属性。
div idrooth3a的值是:{{nums.a}}/h3button clicknums.aa1/buttonbutton clicknums {a:666,b:888}彻底替换掉nums/button
/divscript typetext/javascriptconst vm new Vue({el:#root,data:{nums:{a:1,b:100}},watch:{nums:{handler(){console.log(nums changed)}}}})
/script以上代码中对对象nums进行侦听如果属性修改触发回调函数。在nums中包含a b两个属性。在两个按钮中一个让a另一个直接替换掉整个nums。
输出结果 将a的值一直添加到10都没有触发侦听属性的回调函数。 替换掉整个nums才会触发回调输出nums changed。
如果希望当任意一个属性值被修改时都能触发对象的回调可以添加deep: true属性
nums:{deep:true,handler(){console.log(nums changed)}
}这样不论对象内部有多少层嵌套都会触发对象的侦听属性。 异步任务
绝大部分情况下watch的任务computed都可以完成但是watch的功能其实比computed更加强大比如computed无法处理异步任务。
示例
div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br/
/divscript typetext/javascriptconst vm new Vue({el:#root,data:{firstName:张,lastName:三},computed: {fullName(){return this.firstName - this.lastName}}})
/script以上代码是一个通过姓和名得到姓名的过程fullName通过计算属性实现。
假设要求fullName在姓或名修改后一秒再输出新名称这就需要使用setTimeout创建一个异步任务
computed: {fullName(){let namesetTimeout((){name this.firstName - this.lastName},1000);return name}
}输出 结果fullName直接不输出了因为fullName依赖于函数返回值但是函数返回值是name这个变量一开始是let name随后进入异步任务setTimeout中拿到name this.firstName - this.lastName不过当异步任务还没有返回就直接return name了这导致name undefinedVue直接不输出。
watch就可以处理异步任务
new Vue({el:#root,data:{firstName:张,lastName:三,fullName:张-三},watch:{firstName(val){setTimeout((){this.fullName val - this.lastName},1000);},lastName(val){setTimeout((){this.fullName val - this.lastName},1000);}}
})对firstName和lastName进行侦听在侦听的函数内部执行异步任务setTimeout修改fullName。由于fullName是一个存在于data内部的变量当一秒后异步任务执行完毕就会修改data内的值导致模板重新渲染实现一秒后更新fullName的值。
