【VUE】在vue中,Watcher与Dep的关系

关于vue中的WatcherDep的关系讨论。

这两者相互依赖,形成了一个比较完备的响应式系统。

  1. 一个组件实例对应一个Watcher(负责视图更新)
  2. 每个响应式属性,对应一个Dep
  3. 计算属性(computed)以及监听器(watch)都会创建各自的 watcher

1.数据属性 & Dep

js 复制代码
data() {
  return {
    count: 0,    // 会创建一个 Dep
    user: {      // user 对象和其每个属性都会创建各自的 Dep
      name: 'John',  // 一个 Dep
      age: 25     // 一个 Dep
    }
  }
}

对于一个对象,自身有一个Dep,其内在的每个属性都会有一个Dep,所以上述的user对象中,存在3个Dep。

2.watcher的类型

  1. 每个组件实例,都会创建一个watcher
  2. 依赖属性存在计算属性computed,也会存在一个watcher
  3. 监听器watch

3.依赖收集的过程

访问时的过程 ------> getter

js 复制代码
<div>{{ count }}</div>

// 渲染 Watcher 执行前,Dep.target 设置为渲染 Watcher
// 访问 count 时:
1. count 的 getter 被触发
2. 将当前 Dep.target (渲染 Watcher) 添加到 count 的 Dep 中
3. 同时这个 Watcher 也会记录这个 Dep
js 复制代码
Component Instance
│
├── Render Watcher (负责视图更新)
│   ├── 订阅了 count 的 Dep
│   ├── 订阅了 user.name 的 Dep
│   └── 订阅了其他模板中用到的数据的 Dep
│
├── Computed Watcher (如果有计算属性)
│   ├── 订阅了计算依赖的数据的 Dep
│   └── ...
│
└── User Watcher (如果有 watch 选项)
    ├── 订阅了被监听数据的 Dep
    └── ...

触发更新时的过程 ------> setter

当数据变化时:

  1. 数据的 setter 被触发
  2. 通知对应的 Dep
  3. Dep 通知所有订阅它的 Watcher
  4. Watcher 根据类型执行不同操作:
    • 渲染 Watcher → 触发组件重新渲染
    • 计算属性 Watcher → 重新计算
    • 用户 Watcher → 执行回调函数

总结起来

一个Watcher中存在多个Dep,依组件中的data中的属性而看

一个Dep中也可存在多个Watcher,如果此时的属性被computed或者watch依赖,那么就会存在多个Watcher

相关推荐
二个半engineer2 分钟前
微前端中iframe集成方式与使用微前端框架方式对比
前端·前端框架
我是华为OD~HR~栗栗呀7 分钟前
测试转C++开发面经(华为OD)
java·c++·后端·python·华为od·华为·面试
小菜全13 分钟前
《WebAssembly:前端开发的新可能》
前端·javascript
Dream it possible!18 分钟前
LeetCode 面试经典 150_哈希表_快乐数(45_202_C++_简单)(哈希表;快慢指针)
leetcode·面试·散列表
余防18 分钟前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与22 分钟前
前端2.0
前端
南风木兮丶29 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少42 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务44 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia1 小时前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium