vue的响应式原理

vue2的响应式原理

  1. 属性描述符,也就是对对象的属性进行劫持
  • 通过 get收集依赖(收集使用该数据的组件),set 派发更新(通知依赖的组件重新渲染)

    • 依赖收集:每个组件实例对应一个 watcher对象,当组件渲染访问数据时,会触发属性的getter,将当前的watcher添加到依赖列表中(dep)
    • 派发更新: 当数据变化时触发setter,Dep会通知所关联的watcher重新计算从而触发组件重新渲染
  • 注意 :数组的响应式 是通过重写数组的方法(push、pop、splice)来实现对数组变化的监听,因为这些方法无法通过 object.defineProperty直接监听的

js 复制代码
Object.defineProperty(obj,'a',{
	value:10,
	writable:false,// 不可重写
	enumerable:false,// 不可遍历
	configurable:false,// 不可修改值本身
})

// vue 响应式简化版实现
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) { // Dep.target 是当前 Watcher
        dep.addSub(Dep.target); // 收集依赖
      }
      return val;
    },
    set(newVal) {
      val = newVal;
      dep.notify(); // 通知所有 Watcher 更新
    },
  });
}

vue3的响应式原理

  • vue 3 使用Proxy代替 Object.defineProperty, 解决了vue2的局限性,(如无法检查对象属性的新增和删除,数组索引的直接赋值等)提高了性能
    • Proxy he reflect 的区别

      • Proxy:可以拦截对象的整个操作(读写,增删)
      • reflect 只能操作对象
    • 响应式API : reactive 和 ref

      • reactive(obj):将普通对象转换为响应式对象(通过 Proxy 代理)
      • ref(value):将基本类型值包装为响应式对象(通过 .value 访问)
    • 依赖和收集

      • track: 再getter中追踪依赖(类似vue2的dep)
      • trigger: 在setter 中触发依赖
js 复制代码
// 简化版实现
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return true;
    },
  });
}

‌Vue 2 vs. Vue 3 响应式对比

‌特性 Vue 2 (Object.defineProperty)‌ Vue 3 (Proxy)
对象属性监听 需要遍历属性递归劫持 直接代理整个对象
数组监听 重写数组方法 直接监听索引变化
新增/删除属性 需手动调用 Vue.set/Vue.delete 自动支持
性能 递归劫持有性能损耗 惰性劫持,按需触发
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端