Vue中watch的详解

1. watch是什么？
watch：侦听器，是Vue实例的一个属性，是用来响应数据的变化，需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

2. watch的使用
2.1 watch基础语法

watch: {
    被监听的数据: {
        handler(数据改变后的值, 数据改变之前的值) {
            相关代码逻辑...
        }
    }
}

被监听的数据：data中定义的数据；
数据改变后的值：该数据改变后的新值；
数据改变之前的值：该数据改变之前的值。
2.2 watch监听单个简单数据类型

在输入框中输入文本后：

这里text改变了三次，分别输入1、2、3，得到如上输出。

2.3 监听复杂数据类型的某个属性的变化

检测某个属性值的时候需要用对象.属性名的写法，用法和简单数据类型一致。

2.4 immediate (立即处理 进入页面就触发)

immediate 设为true，进入页面会立即执行handler函数。

2.5 deep 深度监听

对象和数组都是复杂数据类型，复杂数据类型存的是地址值，地址没有变，不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值设为 true，使用deep属性可以监测到整个对象所有属性值的变化，某个属性发生变化，watch都会触发监听该对象。

3. watch简写形式
如果只是监听单个简单的数据，使用watch的简写形式就可以满足需求。

代码如下：