vuewatchdeep的简单介绍

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

本文目录一览：

• 1、vue watch中deep和immediate的用法
• 2、2020-09-13 浅谈： Vue watch监听deep、immediate属性
• 3、深度监听（vue中watch的deep）
• 4、vue打开页面的时候如何让watch深度监听初始化不走

vue watch中deep和immediate的用法

当值第一次绑定时watch不会执行监听函数，当值改变时才会执行，如果想要最初绑定知识也执行需要设置immediate属性为true。immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

监听对象属性值发生变化是碰团需要设置deep为true，deep表示深度监听。数组不需要深度监听；在watch中不要使用箭头函数，因为唤吵高箭头函和尺数中的this是指向当前作用域。

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的响应变化。

深度监听（vue中watch的deep）

当监听的是对象属性，手动修改对象的某个属性值是会发现，监听并没有生效，此时我们需要用到watch的deep属性，当deep为true时它会一层层遍历给对象的所有属性都加上这个监听函数，这样可以检测到对象的每个属性变化，但是这样做会造成更大的性能开销。

优化： 可以使用字符串监听，即给对象会改变的属性指定该监听器，这样只有遇到该属性才会给其设置监听器，而不是给对象的所有属性都加上监听函数。

例如之前动态修改echarts配置属性中的data值

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

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

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

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

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

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

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

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

[img]

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