watch倾听器

1.watch基础用法

1.1 新旧值案例

此时我们添加一个文本框，使用v-model将数据返回出来

再在script 中使用watch方法

第一个参数person 是变量，newValue 是新值，oldValue 是旧值

那么什么是新值？什么是旧值？

下面这张图可以详细的看出来

通过上图可以看出

其实旧值也就是在输入新的文字之前的值

新值也就是输入后的所有值

那我们删除一个数字时，会发生什么结果呢？

跟上面相似，旧值是删除前的值，而新值就是删除后的值

1.2新值案例升级1

现在我们对代码修改一下，要求只看新值，并且讲person 改成一个对象

此时控制台会是什么样的呢?

可以看到，即使添加了《1234》，在控制台中却什么也没有

这是因为我们必须要对他生成一个getter 函数

所以我们再对代码升级一下

在加上这个方法后，并且将person对象变成了person的value中的name值

此时的结果会是

现在就可以发现，在输入了《1234》后，相对应的控制台也输出了新值

所以说是一个对象时，我们就应该为他添加getter方法

1.3 新值案例升级2

在案例1中，只能对他的name变化输出，那么如果我修改了age，他就不会输出了，所以我们再次对他升级

此时仍然是监听person对象，但是在下面加上了一个“ {deep：true} ”，也就是深度监听

无论是name发生改变，还是age 发生改变，都可以监听到

此时的结果相比案例1，还多出了一个age 属性，因为咱们现在监听的是一个对象，所以会将对象的所有东西都返回出来

1.4 立即监听

在上面的案例中，都监听出了改变后的新值，那么还未改变时的值，能不能直接监听并输出呢？

加上一个小小的属性：immediate

尽管没有对它进行改变，但是初始值还是会显示出来，这就是立即监听

2. watch 分开监听

此时我们优化了代码，让页面有两个文本框，可以对名和姓都进行监听并输出

并且新值和旧值都是分开的

在页面中无论进行任何操作，都会返回出第一个文本框和第二个文本框的值

并且返回的都是新值

那么想返回旧值的话其实是相同的操作

仅需要在控制台输出 后面的即可

那么可以看出现在已经是老值了

3.watchEffect用法

3.1 watchEffect的基本案例

此时我们添加watchEffect 方法但是不和watch 方法一样，我们在这里什么参数也不写

而是直接输出姓名的value

这里就可以看出，即使没有写参数，但是仍然将数据都返回出来了

也就是说既可以立即监听，又可以像以前那样拿到所有的数据，所以他的性能较高

在某些方面也比watch要强