Vue——watch选项详解

1. 什么是watch选项？（官方解释）

类型：{ [key: string]: string | Function | Object | Array }
详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例i化时调用 $watch()，遍历 watch 对象的每一个属性。

2. 通俗解释

watch选项能够监听值的变化。

3. 简单使用

<div><p>Number: {{ myNumber }}</p><p>Number: <input type="text" v-model.number="myNumber"></p>
</div>new Vue({el: '#root',data: {myNumber: 'Dawei'},watch: {myNumber(newVal, oldVal) {console.log('newVal', newVal);console.log('oldVal', oldVal);}}
})

根据上面的代码，在输入框输入内容，控制台会显示新值还有旧值。

4. handler方法和immediate属性

根据上面的例子我们加以改造

<div><p>Number: {{ myNumber }}</p><p>Number: <input type="text" v-model.number="myNumber"></p>
</div>new Vue({el: '#root',data: {myNumber: 'Dawei'},watch: {myNumber: {handler(newVal, oldVal) {console.log('newVal', newVal);console.log('oldVal', oldVal);},immediate: true}}
})

handler方法就是你watch中需要具体执行的方法；
immediate为true时则立即触发回调函数；如果为false，则和上面的例子一样，不会立即执行回调。

5. deep属性

上面两个例子都是监听简单数据类型的数据，对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。

<div><p>Obj-a: {{ obj.a }}</p><p>Obj-a: <input type="text" v-model="obj.a"></p>
</div>new Vue({el: '#root',data: {obj: {a: ''}},watch: {'obj': {handler(newVal, oldVal) {console.log('newVal-obj.a', obj.a);console.log('oldVal-obj.b', obj.a);},deep: true}}
})

deep顾名思义就是深入监听，也就是在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，固然也会损耗性能。

6. 注销监听

在第五点后面我提到了损耗性能，但对于组件开发的情况下是不存在，监听事件会随着组件的销毁而销毁。而在组件外声明的监听事件，我们需要使用unWatch方法注销，防止内存溢出。

7. 监听的多种写法（只介绍常用的两种）

// 第一种
<div><p>Obj-a: {{ obj.a }}</p><p>Obj-a: <input type="text" v-model="obj.a"></p>
</div>new Vue({el: '#root',data: {obj: {a: ''}},watch: {obj: { // <--重点看这里handler(newVal, oldVal) {console.log('newVal-obj.a', obj.a);console.log('oldVal-obj.b', obj.a);},deep: true}}
})// 第二种<div><p>Obj--a: {{ obj.a }}</p><p>Obj--a: <input type="text" v-model="obj.a"></p>
</div>new Vue({el: '#root',data: {obj: {a: ''}},watch: {'obj.a': { // <--重点看这里handler(newVal, oldVal) {console.log('newVal-obj.a', obj.a);console.log('oldVal-obj.b', obj.a);},deep: true}}
})

8. 特别注意

ES6中推出了箭头函数，上述例子我均未使用箭头函数，如果在handler函数中使用了箭头函数，改变了this指向，就无法获取到Vue实例，则为undifined。
对于父子组件传参，异步获取数据有时会存在获取不到值的情况。这时候watch就派上用场，适当的时候要配合immediate或者deep属性配合使用。

9. 源码解析

// state.jsfunction createWatcher (vm: Component,expOrFn: string | Function,handler: any,options?: Object
) {if (isPlainObject(handler)) {options = handlerhandler = handler.handler}if (typeof handler === 'string') {handler = vm[handler]}return vm.$watch(expOrFn, handler, options)
}

Vue的类初始化建立数据绑定时，会从用户传的参数来判断拿什么来做监听的数据变量，拿什么来当作监听到数据变更后的处理函数。因为在变量你传了一个对象，这个对象就是createWatcher函数参数中对应的handler,函数第一步逻辑就是判断它是不是一个对象，如果是对象，就拿它里面的handler参数来作为监听事件的处理函数。

Vue——watch选项详解相关推荐

Vue组件-Confirm详解
Vue组件-Confirm详解原作者:爱扎马尾的小狮子一.使用的地方引用,传入属性和方法在需要的地方引入组件,然后传入对应的属性和方法组件 <template> <div : ...
一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」难度 ...
最全最详细前端vue面试题+详解答案(拿到高薪offer不是梦)
最全vue面试题+详解答案 1.MVC 和 MVVM 区别 MVC MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写,一种软件设计典范. Model(模型) ...
【面试题】973- 一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」难度 ...
最全的 Vue 面试题+详解答案
前言本文整理了高频出现的 Vue 相关面试题并且附带详解答案难度分为简单中等困难三种类型大家可以先不看答案自测一下自己的 Vue 水平哈如果对原理感兴趣的同学欢迎查看小编的手写 Vue ...
WPD:Page Download Time Breakdown选项详解
WPD:Page Download Time Breakdown选项详解 "页面下载时间细分"图显示每个页面组件下载时间的细分,可以根据它确定在网页下载期间事务响应时间缓慢是由网络 ...
kernel 选项详解(stlinux2.3) 2-2
kernel 选项详解(stlinux2.3) 2-2 []IP:TCP syncookie support(disabled per default) //TCP cookie同步支持(默认关 ...
selenium工具启动Chrome浏览器时配置选项详解
mb62abf3afb54fb2022-06-18 00:02:10 文章标签chromechrome浏览器加载文章分类虚拟化云计算阅读数1473 前言 1. Chromeoptions 是Chrom ...
Ffmpeg快速命令使用 Ffmpeg选项详解 Ffmepg格式详解常见视频文件格式详解
http://www.ffmpeg.com.cn/index.php/%E9%A6%96%E9%A1%B5 Ffmpeg快速命令使用 From Ffmpeg工程组 Jump to: navigatio ...