亲宝软件园·资讯

展开

Vue watch监听使用的几种方法

script~ 人气:0

一、watch使用的几种方法

1、 通过 watch 监听 msg 数据的变化。

watch: {
    msg(oldValue, newValue) {
        console.log(oldValue)
        console.log(newValue)
    }
}

2、通过 watch 监听 obj数据的变化。(深度监听 deep)

data() {
    return {
        obj: {
            'name': "赵",
            'age': 18
        },
    }
},
watch: {
    obj: {
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true  // 深度监听
    }
}

3、通过 watch 监听 data 数据的变化,数据发生变化时,执行 change 方法

watch: {
    data: 'change' // 值可以为methods的方法名
},
methods: {
    change(oldVal,newVal){
   console.log(oldVal,newVal)
  }
}

二、watch中的immediate与handler和deep属性

1、immediate属性

使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

2、handler属性

watch中需要具体执行的方法

3、deep属性

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听,数组字符串一般不需要

data() {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        // 执行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }
   // 如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
    'obj.name': {
        // 执行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }
}

加载全部内容

相关教程
猜你喜欢
用户评论