Vue 使用技巧手记

watch监听

Vue监听属性有很多种写法，也有几个配置选项

使用配置项

new Vue({
    watch:{
        content:{
            handler(old,newVal){
                console.log(old,newVal)
            }，
            deep:true，
            immediate:true
        }
    }
})

1. deep：是一个布尔类型，告诉Vue以递归的方式监听嵌套对象内部值的变化。
2. immediate：是一个布尔值类型，会立即触发而调用处理函数，而不用等到属性值第一次发生变化时才调用。

以上两个值默认值都为false，不需要的时候完全可以忽略。使用下面这种方法。

new Vue({
    watch:{
        content(old,newVal){
            console.log(old,newVal)
        }
    }
})

在使用immediate的时候，由于是自动触发，这样会导致旧值为undefined，这一点需要格外注意。

或者还可以这样写

new Vue({
    watch:{
        content:"watchContent"
    },
    methods:{
        watchContent(val,oldVal){
            console.log(val,oldVal)
        }
    }
})