watch监听中立即监听和深度监听

谁践踏了优雅 2021-08-13 18:23 459阅读 0赞

wacth通常用来监听数据的变化如下代码，默认是被监听数据变化时执行，

其中handler默认情况下不用写，下图是需要这个监听立即被执行，就是首次进来没变化的时候就执行设置属性，

不需要立即执行就不用添加immediate这个属性

immediate:true

还有一个常用的属性就是深度监听 deep:true

上面的代码如果不加deep:true 那么console中就不会执行，只执行第一次，输出结果为![20191121103608179.png][]

受现代 JavaScript 的限制 (以及废弃 `Object.observe`)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 `getter/setter` 转化过程，所以属性必须在 `data` 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听`obj`这个属性它的引用的变化，我们只有给`obj`赋值的时候它才会监听到。

这个时候就可以使用deep深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样消耗过大。

优化，直接监听obj.a

watch: {
      'obj.a': {
        handler(newName, oldName) {
          console.log(newName, oldName);
        },
        immediate: true,
        // deep: true
      }
    }

watch一般写在组件内，随着组件配合路由的切换，组件的注销watch也会随之注销。

[20191121103608179.png]: /images/20210813/9af6ad078d294ebbbab0c0184e10db5d.png

watch监听中立即监听和深度监听

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue 深度监听watch（如何watch监听一个对象内部的变化）

相关 vue2.0中watch总结：普通监听和深度监听

相关 html 监听后端变化_Vue.js中 watch(深度监听)

相关深度监听啊

相关 vue—watch深度监听（deep:true）

相关 vue监听和深度监听watch

相关 Watch 监听

相关【uni-app框架】Vue之watch对象监听仅当对象地址发生改变的时候才会监听【普通监听和深度监听区别】

相关 watch监听

相关 watch监听中立即监听和深度监听