Vue2响应式原理

会说法语的猪

已于 2022-05-04 17:14:16 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： vue

于 2022-05-04 17:09:46 首次发布

本文链接：https://blog.csdn.net/m0_51431448/article/details/124573065

前端同时被 2 个专栏收录

132 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

vue

80 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文深入解析Vue2中响应式的核心机制，包括Object.defineProperty实现的数据劫持和数组方法重写，以及Vue2响应式系统的局限性，如无法检测属性新增和删除。同时，介绍了Vue3如何通过Proxy代理改进这些问题，实现更高效的数据响应，并在真正使用时才将数据变为响应式，支持属性动态增删。

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

Vue2实现响应式核心就是Object.defineProperty数据劫持，针对数组重写了数组方法
在Vue2源码中实现响应式考虑到更多情况，以下所写了V2实现响应式的核心逻辑

const data = {
  name: 'wft',
  age: 18,
  info: {
    test: '哈哈哈'
  },
  list: [1, 2, 3, 4, 5]
}

const oldArrProto = Array.prototype;
const newArrProto = Object.create(oldArrProto);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
  newArrProto[methodName] = function () {  // 1. 更新视图； 2. 执行原来的方法
    oldArrProto[methodName].call(this, ...arguments)
    console.log('更新视图操作----->>>')
  }
})

observer(data)

function observer(target) {
  if (typeof target !== 'object' || target === null) {
    return target
  }

  if (target.constructor === Array) {  //  如果是数组的话， 就把原型对象修改成重写之后的（主要是为了能够进行更新视图操作）
    target.__proto__ = new