【金秋打卡】第 13 天 vue基础入门（下）| 2-10 watch 和 watchEffect 的使用和差异性（1）

这篇文章可以入选评委评选的最佳手记吗？期待ing…

‍学习目标：
1）Vue3 里面 composition API 里面的新特性。
我的问题：
1）什么是侦听器？
2）怎么使用侦听器？

我们来学习侦听器这块的内容。‍‍
在之前学习基础语法的时候我们已经知道了 watch 这样的侦听器，‍‍
我们来讲在 composition API 里面我们如何来使用 watch 侦听器，‍‍
代码示例：

代码解读：

我们写一个input框，‍‍我们用了 v杠model，(双向绑定，input框，上下同时变化)等于一个叫做name，‍‍前面我也加一个姓名，或者写Name:好了，后面我们什么都不跟。‍‍

然后在下面我们再写一个div，复制一个出来叫Name is dell lee，
我们来一个双向绑定，
然后在上面我们来去写这个内容ref默认给一个dell，‍‍把name导出出去，保存，回到页面上我们刷新，‍‍效果:

比如说加一个lee下面就会跟着变，‍‍这是一个很简单的内容，

这里我不用计算属性了，我用一个watch：

也就是在 Vue 里面提供给我们的一个新的API叫做watch，‍‍
在setup函数里面我们可以直接用 watch，
我们可以怎么写？

我们可以写一个watch，‍‍监听name叫响应式引用的变化。‍‍

在这里面‍‍当它变化之后会调用后面的回调函数，这个回调函数会接收两个内容，一个叫做‍‍当前的这个是叫currentValue，
还可以接收一个叫做prevValue，也就是之前的值。‍‍

我可以 console点log一下，
然后到页面上我们‍‍在控制台里面刷新一下，现在什么也没有:

当我去改变 name 的时候，大家看‍‍:

是不是就会打印出这个current。
比如说我再刷新从头来，我这儿加一个a‍‍：

它当前的值就是della。
然后原始这个值就变成了dell。‍‍

我再加个b，当前值就是dellab，上一次的值就是della，‍‍

这就是watch侦听器的作用【啊哈】

这个 watch 它有两个特性，
第一个它是具备一定的 lazy‍‍特性的，就是比较懒，懒惰性。什么叫惰性？此处按下不表，下文会有讲解。
第二个就是参数可以拿到原始和当前值，‍‍

什么叫做lazy？

当页面第一次‍‍展示的时候，你会发现侦听器它并不会去执行，‍‍只有你在这里输入新的内容的时候，它才会去执行，‍‍
所以它是一个惰性执行的。

首次页面展示的时候它不会执行，只有你‍‍变化了之后它才会执行，这叫惰性的执行。‍‍

为什么要说它？
一会我们说其他知识点的时候要做一个对比。‍‍

我们说除了我们可以对这种 ref 形式的基础类型的数据做这种侦听之外，‍‍
我们还可以对一些比如说reactive这样的数据类型做一个监听，
比如在这里我写一个reactive，‍‍这块我就改一下叫做reactive，后面我跟一个对象，‍‍后面叫做dell:

然后这块你就要用nameObj点name:

当然我们也可以写的更精致一些:

如果你这么去写，你把name导出出去就行了，这块还是用‍‍name。

如果现在它是一个reactive这样的数据类型，‍‍我侦听的是谁？
我侦听的是nameObj点name：

如果你这么去写，‍‍你会发现它是有问题的：

大家看说你如果是个 watch 的话，你监听的资源必须是‍‍一个function，一个ref或者其他的一些内容，‍‍
也就是当前你的这个东西它是不满足现在的要求的，这块我们怎么去做呢？‍‍

如果你侦听的是一个reactive这样的数据的话，‍‍这块你不能直接这么写nameObj点name，
你要写一个箭头函数，然后返回‍‍nameObj点name：

这样去写才可以把它变成函数去监听nameObj点name，这样的话‍‍就不会有问题了，我们保存一下，回到这里来刷新，‍‍没有任何的问题：

一定要记住，当如果你去写这种reactive对应的形式引用的时候，‍‍你要在前面写一个箭头函数这种形式去监听你对应想要监听的内容。

侦听器可以侦听一个内容外，其实它可以侦听两个内容，‍‍
比如现在我们再去定义：

比如说EnglishName 巴拉巴拉，
下面展示的是EnglishName，‍‍我去定义 EnglishName:

这块导出要加上。‍‍

然后我们回到页面上刷新，‍‍我改 dell 的时候，大家看 watch 侦听器是执行的:

当我改 lee 的时候watch 侦听器 就不执行了。

我希望改 lee 的时候 watch 侦听器 也执行，‍‍
你可能会这么去写，你是不是把这块代码再复制一下，然后这块写一个englishName:

保存，‍‍刷新，没问题:

但这样写代码是冗余的，‍‍能不能我把 name 和englishName 侦听器写在一起?完全可以。

在watch里面可以接收一个数组，我们在这写一个数组：

它的意思就是侦听器 侦听是这个数组里的内容的变化，如果你name或者englishName变化，
我都会执行后面的这个函数，‍‍当然后面这个函数里面接收的参数也就同样的会发生变化了，它会怎么变化呢？‍‍

首先你侦听的是 name 和englishName，所以它接收的参数也会是一个数组，逗号，‍‍然后后面也是一个数组，当然这块它是curName，对应的是前面的nameObj点name，然后curEng接收到的就是你englishName，
后面这个数组，之前的叫prevName，然后再加一个preEng，它是这么接收的：

也就是你侦听两个数据的变化，‍‍回调函数里面可以获取到这两个数据当前的值以及它之前的值，
这么写完之后我们去打印一下：

保存，‍‍到页面上刷新，我们看一下效果。‍‍

我先改Name 改a：

大家可以看‍‍当前的 name 是della，之前的name 是 dell，
然后改一下 lee:

当前的‍‍lee englishName是leev，然后之前的englishName是lee，‍‍
这样的话就没有什么问题了，我们能把每一次侦听器侦听的这些数据的‍‍内容都展示，或者说都打印出来都获取回来。‍‍

第三个侦听器的特性，‍‍不仅可以侦听一个内容，还可以侦听多个内容、多个‍‍数据的变化，用一个侦听器承载。
怎么承载？
这块写一个数组，发生变化的时候，对应的这几个数据的‍‍内容也可以通过后面回调函数里面的这些参数的数组来获取到，这就是watch的一个应用。