vuewatchhandler的简单介绍

本篇文章给大家谈谈vuewatchhandler，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue watch原理
• 2、Vue中watch的使用
• 3、vue中，计算属性 computed 和 watch 的区别
• 4、vue打开页面的时候如何让watch深度监听初始化不走
• 5、2020-09-13 浅谈： Vue watch监听deep、immediate属性

vue watch原理

1、很多情况下，computed和watch可以实现相同的功能；

2、当需要在数据肢袜变化时执行异腊饥腔步或开销较大的操作时，使用watch会更好一些。因为computed会立即返回，此时异步操作可能还没有完成；

3、因为数据是响应式的，使得watch有意义。并不是因为watch了才使得数据是响应式的。

4、使用immediate:true，会在初始化watch时就立即执行handler回调函数，而不用等下一次数据更新。

5、使用deep:true，才会递轮衫归监听对象的属性（如果监听的是对象或数组）。

在created函数调用之前，调用了initWatcher方法，（调用该方法时,若immediate为真，则会立即执行回调函数），为每一个watcher属性实例化了一个Watcher，new Watcher ，会传入监听的属性key、回调函数和options，包括handler、deep和immediate的值，实例化的结尾会调用watcher.prototype.get方法，该方法会获得值并返回，值存在watcher.value属性上。

Get函数（即autorun）的执行即导致了watcher被收集为依赖。至此成功的监听了属性。

Get时，如果deep为真，则会递归监听所有的属性。

在数据发生变化时，调用watcher.prototype.update方法，最终会执行第三步的get。

watch的watcher中的lazy和sync都为false，所以会执行queueWatcher.

第一步

第二步

第三步 watch的get方法

第四步 更新数据

第五步

Q：哪些对象是Watcher?

A ：在源码中，看到三个地方会初始化Watcher对象。挂载组件（mountComponent方法）、初始化watch（initWatch方法）和初始化computed（initComputed方法）。

Vue中watch的使用

在vue中，使用watch来响应数据的变化。

监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。

简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

watch函数的参数中，第一个是改变之前的值，第二个是改变之后的值， 这两个参数非常有用。

watch的2个参数 (newValue, oldValue)

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例如ajax请求，复杂的业务逻辑处理等。

数据初始化

mounted

watch

需要使用handler函数型凯,并且开启深度侦听deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

当监测为对象的时候（非数组情况），deep = true 可以监测对象中属性的变化，并且（监测为对象的时候，newVal == oldVal）

此时,需要watch对象的某一具体属性才可以监听到数据的变化,具体做法是使用对象点方法获取到属性,并且用引号

(1)如果要观察data下一个对象的属性，可以使用 '对象.属性' 的方式， 注意： 一定要要引号。

(2)如果改变了一个对象的属性，就必须使用 deep: true， 否则检测不到变化。

(3)数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

以上监听shipStatusArr的用法，会在shipStatusArr中任卜隐唤一属性变化时触发，如果是只监听shipStatusArr的name变化，更优写法是：

进入组件的时候，第一次并不会执行watch，只有值发生改变才会执行 , 是因为immediate 默认 false

当 immediate = true 的时候，进入组件会立即执行。并且可以监测到组件传递数据。

回调将会在侦听开始之后被立即调用。

如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

监听的复携耐杂数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法。

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

(1)在watch中不要使用箭头函数，即不应该使用箭头函数来定义 watcher 函数 , 因为箭头函数中的this是指向当前作用域

(2)开启深度侦听后,触发一次,两个数据一致,这是vue做了处理

=复杂数据类型的侦听需要开启深度侦听才可以检测到内部数据的改变,但开启深度侦听后,2个参数值是相同的,都是为数据的内存地址,精确到对象的属性名进行深度侦听可以解决此问题

=如果修改复杂类型内部的数据也会触发，触发的频率就回比较高,因为复制类型数据可能多个地方使用,如果都会触发侦听器,则会一直执行,因此vue做了这个优化,不发生触发,如果非要侦听，可以使用深度侦听

如下所示

watch监听的值可以不判断条件,只要数据发生变化就执行某些逻辑

比如 搜索功能实现

vue中，计算属性 computed 和 watch 的区别

methods，watch和computed都是以函数为基础的，但各自却都不同；

不存在缓存，执行一次运行一次，执行n次，运行n次

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

计算属性 computed 是基于data中数据进行处理亏带的，data数据变化，他也跟着变化

当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）

每个计算属性厅耐都包含两个set、get 属性

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化

watch:类似于监听机制+事件机制。

在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

注，上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler（）方法

1，销伏芦handler（）：当页面刚进入时，自动绑定watch事件，不需要进行触发

注：

2，第二种

[img]

vue打开页面的时候如何让watch深度监听初始化不走

答:vue打开页面的时候让watch深团行度监听初始化不走...

1. handler:其值是一个回调函数。即监听到变化时应该执行的函数。

2. 是deep:其值是true或false;确认是否深入监高或孝听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)

3. immediate:其戚稿值是true或false;确认是否以当前的初始值执行handler的函数

...深度监听 - 天才小熊猫点

1. Vue中的watch,默认不监听对象内部值的改变。

2. 配置deep:true可以监听对象内部值的改变。

2020-09-13 浅谈： Vue watch监听deep、immediate属性

Vue watch 用于监测数据变化，可以方便开发中对于数据的变化做出一些处理。关于deep、immdiate属性场景使用总结如 下，如有疏漏卜扰尘，烦请指正。

watch监听只有在数据变化时才会执行监听函数。父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，此时也需要执行watch监听函数。则需设置immediate：true.

需要监听复杂数据（对象）内部属性的变化时，设置deep属性。Vue会递归的侦听数据和属性的变化（性能消耗较大）。也就是给所有数据和属性添加handler执行李兆函数。

监听notes对象，未添加deep:

执行效果

监听型禅notes对象，，添加deep属性：

性能优化

鉴于deep属性Vue性能消耗较大，对于要监听数据中某个属性的响应时，可以只给对应属性添加deep。如下示例，只需侦听属性b的响应变化。

关于vuewatchhandler和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。