1监听
vue中什么是侦听器
开发中我们在data返回的对象中定义了数据,这个数据可以通过插值语法等方式绑定到templat中。
当数据变化的时候,template里绑定的数据会自动进行更新来显示最新的数据。但是这种变化是在template中自动侦听data的值来进行变换的
在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用到侦听器watch了
官方定义:Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
一个对象,键是要侦听的响应式 property——包含了 data 或 computed property,而值是对应的回调函数。值也可以是方法名,或者包含额外选项的对象。组件实例将会在实例化时调用 $watch(),参阅 $watch,以了解更多关于 deep、immediate 和 flush 选项的信息
侦听器的用法
选项:watch
类型:{ [key: string]: string | Function | Object | Array}
侦听器watch的配置选项:
默认情况下,watch只是在侦听数据的引用变化,对于数据内部属性的变化是不会做出响应的:
这个时候我们可以使用一个选项deep进行更深层的侦听;另外一个属性,是希望一开始的就会立即执行一次:这个时候我们使用immediate选项;这个时候无论后面数据是否有变化,侦听的函数都会有限执行一次;
1.1 监听基本类型
![](https://img-blog.csdnimg.cn/img_convert/2b729d106434845a5c051e65575bf8e2.png)
![](https://img-blog.csdnimg.cn/img_convert/1a1c9b1cbb61642e17eba5148e829e9b.png)
1.2 监听复杂类型
![](https://img-blog.csdnimg.cn/img_convert/a083379f6b8331b90e104954c7519864.png)
网页刚开打就执行一次: immediate
总结: immediate立即侦听, deep深度侦听, handler固定方法触发
![](https://img-blog.csdnimg.cn/img_convert/2e2376a1a2141d955fda6c4f068256a0.png)
2 案例:监听list变化, 同步到浏览器本地
![](https://img-blog.csdnimg.cn/img_convert/95b791fe10e35d4eb69b281c71a6040f.png)
![](https://img-blog.csdnimg.cn/img_convert/ed463a7247a969ec9acc96369df4c9f6.png)