Vue全家桶:vue2+vue3全部搞懂：第五篇，Vue的watch监视器

前提，建议先学会前端几大基础：HTML、CSS、JS、Ajax，不然不好懂

这一专栏知识将一次性将vue、vue2、vue3全部讲明白

一、何为watch监视器

其实我个人理解，就跟原本的表单的input事件一样，实时监视事件发生并同步更新数据，input事件不就是只用输入框输入一个东西，不管摁没摁回车键，后台都会监视触发事件。

那么watch监视器就是这么个玩意，比如实时翻译器就需要监视输入的内容，同时在输入时进行翻译

watch跟data、methods、computed一样，都是同级别的配置项，写法也一样；然后里面你要监视哪个data的元素，你就以这个data的元素设置一个【同名】的函数，这里注意两点：

1、监视data里的对象的成员，函数名要【对象.成员名】

2、因为“.”是特殊字符，函数名带它，编译器会有波浪线报错，那就用''引号包起来即可

例子1：

<div id="app"><input type="text"  v-model="words">
</div><script>new Vue({el: '#app',data: {words: ''},//设置watch配置项watch:{//有两种形式：1、函数名(参数1,参数2)，这样的话会自动获取【这次改变的值】和【上一次的值】，参数1就是【这次改变的值】，参数2反之//           2、函数名(参数)，一个参数就是自动获取实时更新的值（上一个写法了解就行，没人用）words(value){console.log('变化了', value)}}})
</script>

例子2：对象也一样，就是'对象.成员'就行

<div id="app"><input type="text"  v-model="obj.word">
</div><script>new Vue({el: '#app',data: {obj:{word: '' }},//设置watch配置项watch:{//有两种形式：1、函数名(参数1,参数2)，这样的话会自动获取【这次改变的值】和【上一次的值】，参数1就是【这次改变的值】，参数2反之//           2、函数名(参数)，一个参数就是自动获取实时更新的值（上一个写法了解就行，没人用）'obj.word'(value){console.log('变化了', value)}}})
</script>

二、用watch尝试实时翻译项目

很简单，就是在watch配置项里设置axios库就行了

先看简单的例子：

<div id="app"><input type="text" v-model="words"><span>{{ translation }}</span>
</div><!-- 引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>new Vue({el: '#app',data: {words: '',translation: ''},watch: {//这里用的是async和await函数方法来获取axios返回的结果async words(value){const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: value //words是这个服务器发送get请求必须带的参数}})console.log(res)console.log(res.data.data)this.translation = res.data.data}//上面的写法是等同于这种传统写法的// axios({//     url: 'https://applet-base-api-t.itheima.net/api/translate',//     params: {//         words: value//     }// }).then(res => {//     console.log(res)// }) }})
</script>

但是这样虽然成功获取了，但是因为watch的实时监视，导致没输入一个字都会获得一个翻译结果

但是我们实际翻译的时候希望的是输入一串字符串后，停了一小会没有再输入了，再进行翻译的

那么就要引入【防抖机制】，这个方法可以应用与【用户双十一疯狂乱点订单请求导致发送N多个请求给服务器，淘宝就爆了】、【滚动条往下滑一点就加载一堆数据】、【翻译敲一个字就翻译一次】这些问题

那么简单的方法就是：加个setTimeout，隔一段时间再执行就好了

<div id="app"><input type="text" v-model="words"><span>{{ translation }}</span>
</div><!-- 引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>new Vue({el: '#app',data: {words: '',translation: ''},watch: {words(value){//用setTimeout控制发送请求的时间setTimeout(async ()=>{const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: value}})console.log(res)console.log(res.data.data)this.translation = res.data.data},1000)}}})
</script>

但是发现还是输入几个字翻译几次，只不过是输出翻译结果的时间间隔了一会再执行的，那么关键来了，我们只需要每次输入的时候【先】【关闭计时器】！！！然后再开启计时器就行了。那么关闭计时器需要有一个具体的【名字】来代表【是哪个计时器】，那就在data里设置一个变量用来代表计时器，然后清理关闭计时器的时候就是指向这个data的变量就行了，看代码：

<script>new Vue({el: '#app2',data: {words: '',translation: '',//这里设置一个timer变量成员，用来代替setTimeout计时器，相当与它就是那个setTimeout的名字timer: null},watch: {words(value){//那就每次监视输入框输入时，第一步是先把计时器关闭了clearTimeout(this.timer)this.timer = setTimeout(async ()=>{const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: value}})console.log(res)console.log(res.data.data)this.translation = res.data.data},1000)}}})
</script>

我画个图给大伙类捋一捋

每一次输入就会触发watch监视，

那这样一来stTimeout计时器已开启，马上又因为下一次输入而导致执行clrearTimeout()关闭掉它，

那么一直输入的情况下就一直没办法执行setTimeout计时器，直到有一段时间不输入了，达到了setTimeout定的时间，那么就足够它完成里面的内容了；

然后直到下一次输入内容从而触发watch监视器，才会再次执行clrearTimeout()把上一次的计时器给清理掉。

三、watch更屌的功能！深度监视对象值改变

按照上面教的方法我们已经可以实时监视表单事件改变了，但是加入我改变的值是多个地方的呢？

比方说我实时翻译的时候，你既要监视我的输入框<input>输入的内容值改变了，还要监视我选择的语言<select><option></option></select>改变了，按照老方法我要在data里设置两个值代表它两，然后再根据它两各自在watch里写两个对应的函数，太麻烦了，要是5、6、100个地方要怎么办？

那就应该在data里用一个【对象】来封装起来这些值，监视的时候直接监视这个对象，其中一个值数据改变了，就是整个对象数据发生改变，那么怎么监视对象的值呢？要按以前说的'对象.成员名'吗？那还是要写很多个函数

watch完整写法是，当监视一个对象时，在watch里直接写一个【同名】的【对象】，然后有两个配置项：

1、deep：true 这个配置项代表开启【深层监视】

2、immediate：true 这个配置项代表初始化立刻执行一次handler函数

至于这个handle函数，watch监视器里对某个变量成员监视，就是设一个【同名字的函数】；而对对象的监视要执行的函数，就是执行【handler函数】，不能改系统自带的，记住是【handler】不要漏了最后的【r】！！！

例子：

<div id="app2"><!-- 这里v-model=""别忘了换成"对象.成员" --><input type="text" v-model="obj.words"><!-- 这里给select表单元素设置了v-model，只要下拉菜单改变，马上把对应的option的value值传给Vue的data --><select v-model="obj.lang"><option value="italy">意大利</option><option value="eglish">英语</option><option value="german">德语</option></select><span>{{ translation }}</span>
</div><!-- 第一步：引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>new Vue({el: '#app2',data: {obj: {words: '',lang: 'eglish'},translation: ''},watch: {obj: {//开启深度监视，整个对象都可以监视了deep: true,handler(value){console.log('对象值改变了', value)}}}})
</script>

那么现在优化一下网络请求，把整个两个参数值都给到axios库的params参数里，直接给他value就行了，value就是对象！然后其他操作就是把上面的操作复制粘贴进去就行了

<!-- 第一步：引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>new Vue({el: '#app2',data: {obj: {words: '初始值就翻译',lang: 'eglish'},translation: '',//这里设置一个timer变量成员，用来代替setTimeout计时器，相当与它就是那个setTimeout的名字timer: null},watch: {obj: {//开启深度监视，可以监视整个对象里面的值改变deep: true,//这个是设置一开始还没有改变表单值、也就是没有触发watch监视时，按照data里的初始值直接先执行一次hangler函数immediate: true,handler(value){//那就每次监视输入框输入时，第一步是先把计时器关闭了clearTimeout(this.timer)this.timer = setTimeout(async ()=>{const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: value//这里value就是data那个对象//其实就等于下面这个麻烦的写法// params: {//     words: value.words,//     lang: value.lang// }})console.log(res.data.data)this.translation = res.data.data},1000)}}}})
</script>