Vue的响应式原理

最新推荐文章于 2025-02-27 14:44:07 发布

BangD

最新推荐文章于 2025-02-27 14:44:07 发布

阅读量118

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/BangD/article/details/128491811

版权

vue.js javascript 前端

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue2.x和Vue3.x中实现响应式的原理。Vue2.x通过Object.defineProperty实现对象和数组的拦截，但存在新增和删除属性不更新的问题。Vue3.x引入了Proxy，能够全面拦截对象属性的读写、增删，同时使用Reflect进行对象操作，提高了响应式的灵活性和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.x的响应式

实现原理：
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

存在问题
- 新增属性、删除属性，界面不会更新
- 直接通过下标修改数组，界面不会自动更新。

let person = {
        name: '张三',
        age: 18,
      }

// 模拟Vue2中实现响应式
      let p = {}
      Object.defineProperty(p, 'name', {
        configurable: true,
        get() {
          // 有人读取name时调用
          return person.name
        },
        set(value) {
          // 有人修改name时调用
          console.log('有人修改name时调用')
          person.name = value
        },
      })
      Object.defineProperty(p, 'age', {
        get() {
          // 有人读取name时调用
          return person.age
        },
        set(value) {
          // 有人修改name时调用
          console.log('有人修改age时调用')
          person.age = value
        },
      })

Vue3.x的响应式

实现原理：
- 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
- 通过Reflect(反射)：对源对象的属性进行操作

// 模拟Vue3中实现响应式
      const p = new Proxy(person, {
        // 有人读取p的某个属性时调用
        get(target, propName) {
          console.log('有人读取了p身上的某个属性', target, propName)
          return Reflect.get(target, propName)
        },
        // 有人修改 或 增加 某个属性时调用
        set(target, propName, value) {
          console.log('有人修改了p身上', target, propName, value)
          Reflect.set(target, propName, value)
        },
        // 有人删除p的某个属性时调用
        deleteProperty(target, propName) {
          console.log(`删除了p身上的${propName}属性`)
          return Reflect.deleteProperty(target, propName)
        },
      })