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

wacth通常用来监听数据的变化如下代码，默认是被监听数据变化时执行，其中handler默认情况下不用写，下图是需要这个监听立即被执行，就是首次进来没变化的时候就执行设置属性，不需要立即执行就不用添加immediate这个属性immediate:true<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt...

七上八下的爆米花

5876人浏览 · 2019-11-21 10:42:42

七上八下的爆米花 · 2019-11-21 10:42:42 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^