watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}
//复制代码注意到handler了吗,我们给 firstName 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。
//而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。
watch:{
// 通过这种语法来watch就行,文档里有。。。看需求,还可以直接watch data,使用deep:true来深度观察
'data.status':{
handler: function(val,oldVal){
//要执行的任务
//这里不知道怎么才能修改到this.data的数据,有知道的麻烦告知
//现在知道的就是通过直接修改Store.state的方式来更新数据,当然效果和修改this.data是一样的
},
// 深度观察
deep:true
},
function(val) {
if (val) {
this.dataForm.hdTicketForm.validityPeriodDisabled = true;
} else {
this.dataForm.hdTicketForm.validityPeriodDisabled = false;
}
},
},
// 或:
watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
// 或 借助 computed 计算属性
computed: {
channel() {
return this.msg.channel
}
},
watch:{
channel(newValue, oldValue) {
console.log('new: %s, old: %s', newval, oldVal)
//这里面可以执行一旦监听的值发生变化你想做的操作
}
}
为什么要注销 watch?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。
const app = new Vue({
template: '<div id="root">{{text}}</div>',
data: {
text: 0
},
watch: {
text(newVal, oldVal){
console.log(`${newVal} : ${oldVal}`);
}
}
});
但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了,这种注销其实也很简单
const unWatch = app.$watch('text', (newVal, oldVal) => {
console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手动注销watch
app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了。
vue中使用了watch侦听属性用来监听和响应 Vue实例上的数据变动.下面的代码展示的是watch属性的完整用法,在工作中发现可以根据不同的情况使用watch属性有三种不同的写法
这个属性用来监视某个数据的变化,并触发相应的回调函数执行,添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化
deep然而,当我们监听的数据是比较深层次,比如要监听的数据是一个对象,就需要用到deep这个属性,属性默认为false;我之前比较有误解的地方就是,总是会以为如果监听的数据如果是在一个对象中,就要使用deep;
在基于vue框架的前端项目开发过程中,只要涉及到稍微复杂一点的业务,我们都会用到computed计算属性这个钩子函数,可以用于一些状态的结合处理和缓存的操作。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!