vue 监听watch

watch 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化

官网介绍

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

监听简单数据类型

data() {
    return {
        msg: "消息消息消息"
    }
},

watch: {
    msg(val, oldVal){
        console.log("旧值: %s, 新值: %s", oldVal, val)
    }
}, 

init() {
    this.msg = "第一次改变"
    this.msg = "第二次改变"
    this.msg = "第三次改变"
}

上面的代码只会输出一次:旧值: 消息消息消息, 新值: 第三次改变
vue的监听属性会等js执行完毕之后,才会使用最后一次更新的值触发监听函数

deep

监听对象

data() {
    return {
        obj: {
            name: "明妃",
            age: 18
        }
    }
},

watch: {
    obj: {
        handler(val, oldVal) {
            console.log("旧值: ", oldVal)
            console.log("新值: ", val)
        },
        deep: true
    },
},

监听对象时,需要添加属性deep: true,否则监听不到数据变化
还又上面打印出来新值和旧值一样,还不知道什么原因......
找到原因了,官网说明:

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

监听对象的属性

第一种方法:直接用 对象.属性 方法拿到属性

watch: {
    "obj.name"(val, oldVal){
        console.log("obj.name 的 旧值: %s, 新值: %s", oldVal, val)
    },
},

第二种方法:利用computed取到属性值,作为中间量转化

watch: {
    objName(val, oldVal) {
        console.log("objName 的 旧值: %s, 新值: %s", oldVal, val)
    },
},

computed: {
    objName() {
        return this.obj.name
    }
},

这两种方法都可以实现监听对象的属性,且取到的新值和旧值相同

监听数组

data() {
    return {
        arr: ["aaa", "bbb"]
    }
},

watch: {
    arr(val, oldVal){
        console.log("旧值: ", oldVal)
        console.log("新值: ", val)
    },
},

监听数组(简单数据类型的数组或复杂数据类型的数组)不需要deep: true属性

immediate

immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

data() {
    return {
        immediateMsg: "火之晨曦",
    }
},

watch: {
    immediateMsg: {
        handler(val, oldVal) {
            console.log("immediateMsg 旧值: %s, 新值: %s", oldVal, val)
        },
        immediate: true
    },
},

以上代码在初始化时,immediateMsg的值不发生改变,也会输出immediateMsg 旧值: undefined, 新值: 火之晨曦

监听路由

有时候页面路由参数改变了，但是使用同一个vue组件，此时不会触发页面的刷新，所以需要监听当前路由，当监听到路由参数变化时，需要去手动做一些操作。监听路由有两种方式：
1 .

watch: {
    ‘$route’: function() {
        handler(val, oldVal) {
            // todo someThing
        }
    },
},

2 .

watch: {
    $route() {
        handler(val, oldVal) {
            // todo someThing
        }
    },
},