Vue中的watch监听器的简单理解
2019-05-20 10:06
417 查看
Vue中的watch监听器的简单理解
1.handler属性和immediate属性
先上代码一眼明了
<p>fullName:{{fullName}}</p> firstName:<input type="text" v-model="firstName"> <br> lastName:<input type="text" v-model="lastName"> watch:{ firstName:{ handler(){ this.fullName = this.firstName + this.lastName; }, immediate:true, }, lastName:{ handler(){ this.fullName = this.firstName + this.lastName; }, immediate:true, } }
watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢?
这时候就需要用到handler属性和immediate属性,immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。
2.deep属性
watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听
<p>obj.a:{{obj.a}}</p> obj.a:<input type="text" v-model="obj.a"> watch:{ obj:{ handler(newName,oldName){ console.log('obj.a changed') }, immediate:true, deep: true } }
按我自己的理解,这里的obj是一个对象,监听属性只能监听到obj这个对象,想要监听到对象里面属性的变化就需要用到deep这个属性来控制
- 注销watch
为什么要注销 watch?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。
但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了
const unWatch = app.$watch('text', (newVal, oldVal) => { console.log(`${newVal} : ${oldVal}`); }) unWatch(); // 手动注销watch
原文链接:点击打开
相关文章推荐
- 简单理解vue中实例属性vm.$els
- VUE路由简单含参跳转链接理解
- 理解vue实现原理,实现一个简单的Vue框架
- vue2.0路由-适合刚接触新手简单理解
- 简单理解vue中Props属性
- vue中watch的理解小记
- Vue生命周期函数的简单理解
- 深入对Vue.js $watch方法的理解
- 简单理解vue中Props属性_javascript技巧
- vue学习(六) 初识计算属性(computed)和监听器(watch)
- 简单理解Vue中的nextTick
- 关于vue的compute\method\watch的理解和区别,摘自51技术
- vue1.0中的watch的简单使用
- vue 中watch监听 和简单的axios请求
- 简单理解vue中track-by属性
- VUE的优缺点简单理解
- 简单理解Vue条件渲染
- 简单理解vue中el、template、replace元素
- 简单理解Vue中的nextTick
- 深入理解vue.js中$watch的oldvalue与newValue