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

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

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

immediate:true

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
        <p>{{obj.name}}:<input type="text" v-model="obj.name"></p>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                firstName: 'Dawei',
                lastName: 'Lou',
                fullName: '',
            }
        },
        watch:{
            firstName:{
                handler(newName,oldName){
                    this.fullName = newName + ' ' + this.lastName;
                },
                immediate:true
            },   
        }
    })
</script>

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
        <div id="root">
                <p>obj.a: {{obj.a}}</p>
                <p>obj.a: <input type="text" v-model="obj.a"></p>
          </div> 
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            obj: {
                 a: 123
            }
        },
        watch: {
            obj: {
            handler(newName, oldName) {
                console.log(newName, oldName);
            },
            immediate: true,
            deep:true
            }
        } 
})
</script>

上面的代码如果不加deep:true 那么console中就不会执行,只执行第一次,输出结果为

受现代 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也会随之注销。

Logo

前往低代码交流专区

更多推荐