vue中的watcher

最新推荐文章于 2024-08-29 23:26:55 发布

头头不会敲代码

最新推荐文章于 2024-08-29 23:26:55 发布

阅读量633

点赞数 12

分类专栏：技术分享文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/olderandyanger/article/details/135144746

版权

25 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的三种watcher类型：渲染watcher用于组件渲染，计算属性watcher处理计算属性，用户watcher则由开发者自定义。还阐述了watcher何时收集依赖数据以及可配置选项如immediate和deep。

摘要由CSDN通过智能技术生成

Vue 中的 watcher 是一种特殊的对象，它可以订阅响应式数据的变化，并在变化时执行相应的回调函数。

渲染 watcher 是负责更新视图的 watcher，每个组件实例都有一个对应的渲染 watcher。当组件实例创建时，会创建一个渲染 watcher，并执行组件的 render 函数，同时收集该组件依赖的响应式数据。当这些数据变化时，渲染 watcher 会触发组件重新渲染。
计算属性 watcher 是负责执行计算属性的 watcher，每个计算属性都有一个对应的计算属性 watcher。当计算属性被访问时，会创建一个计算属性 watcher，并执行计算属性的 getter 函数，同时收集该计算属性依赖的响应式数据。当这些数据变化时，计算属性 watcher 会触发计算属性的重新求值，并通知其依赖的 watcher 更新。
用户 watcher 是用户通过 watch API 自定义的 watcher，可以用来监听一个或多个响应式数据，并在数据变化时执行自定义的回调函数。用户可以通过一些选项来配置用户 watcher 的行为，例如 immediate、deep、sync 等。

当组件实例创建时，会创建一个渲染 watcher，并执行组件的 render 函数，此时会触发响应式数据的 getter 函数，将渲染 watcher 收集到数据的依赖列表中。
当计算属性被访问时，会创建一个计算属性 watcher，并执行计算属性的 getter 函数，此时会触发响应式数据的 getter 函数，将计算属性 watcher 收集到数据的依赖列表中。
当用户通过 watch API 创建一个用户 watcher 时，如果设置了 immediate 选项为 true，会立即执行用户 watcher 的回调函数，此时会触发响应式数据的 getter 函数，将用户 watcher 收集到数据的依赖列表中。
当用户通过 watch API 创建一个用户 watcher 时，如果设置了 deep 选项为 true，会对监听的响应式对象进行深度遍历，将用户 watcher 收集到对象的所有嵌套属性的依赖列表中。