Vue核心知识点 -Vue2响应式系统是基于什么实现的、以及会产生什么问题和解决方案

已于 2024-03-18 11:10:02 修改
阅读量963 收藏 9
点赞数 20
文章标签： vue.js 前端 javascript
于 2024-03-15 16:38:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61723274/article/details/136738413
版权

一、概念

        在Vue 2中，响应式系统是基于Object.defineProperty实现的。它通过劫持对象的属性来实现数据的响应式更新。

        当你将一个对象传递给Vue实例的data选项时，Vue会遍历对象的每个属性，并使用Object.defineProperty方法将其转换为getter和setter。这样一来，当你访问或修改这些属性时，Vue能够捕获到这些操作并触发相应的更新。

        具体而言，Object.defineProperty方法用于定义一个对象的新属性，或者修改对象的现有属性。通过在属性上设置getter和setter，我们可以监听属性的读取和修改行为，并在这些行为发生时执行相应的操作。

        Vue的响应式系统利用了这一特性，在getter中收集依赖（即追踪属性的订阅者），在setter中触发更新（通知订阅者进行响应式更新）。

二、产生的问题

        1、Vue的响应式系统仅对已经存在的属性进行劫持，而不会劫持对象的整个原型链。这意味着如果你向一个已经创建的对象直接添加新属性或删除属性，Vue无法检测到这些更改。

        2、由于数组本质上是对象，Vue可以通过Object.defineProperty或Proxy拦截对象的属性访问和修改。但是，对于数组而言，直接修改索引对应的值(如果对应的值是对象数据、指的是修改整条对象数据、即将一整个对象赋值给当前索引的对象数据，修改当前索引值对应的值​​​​​​对象的某个属性是会触发dom更新的)并不会触发属性的setter，因此Vue无法监测到这种变化。

三、产生问题的场景和解决方案

场景1:

直接为data里的对象通过赋值的方式添加属性和delete删除属性、控制台打印数据添加和删除属性成功、但是页面未能渲染最新数据、即未触发dom的更新。

演示代码

<template>
  <div class="home">
    <h3>这是vue2测试页面</h3>
    <p>用户信息: {{ userMsg }} </p>
    <p><button @click="add">添加用户性别为男</button></p>
    <p><button @click="change">修改用户年龄为18</button></p>
    <p><button @click="deleteH">删除用户身高信息</button></p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 用户信息
      userMsg: {
        name: 'zs',
        age: '20',
        height: '180',
      }
    }
  },
  methods: {
    // 为对象直接添加数据
    add() {
      this.userMsg.sex = '男'
      console.log('添加性别后')
      console.log(this.userMsg)
    },
    change() {
      this.userMsg.age = '18'
      console.log('修改数据年龄后')
      console.log(this.userMsg)
    },
    deleteH() {
      delete this.userMsg.height
      console.log('删除身高数据后')
      console.log(this.userMsg)
    }
  },
}
</script>
<style>
  .home{
    margin: 0 auto;
    text-align: center;
  }
</style>

图示

点击了添加用户性别为男按钮-数据已经添加 dom元素未更新

 点击了删除用户身高信息按钮-数据已经修改 dom元素未更新

解决方案

方案一: 浅拷贝要操作对象数据给一个新对象、对新对象操作、然后将新对象赋值给要操作的对象数据。
原理:

        这些操作都是对操作对象进行重新赋值，Vue 可以检测到这种赋值操作，并且会重新渲染相关的 DOM 元素，因此你看到了 DOM 元素能够更新。

代码
<template>
  <div class="home">
    <h3>这是vue2测试页面</h3>
    <p>用户信息: {{ userMsg }} </p>
    <p><button @click="add">添加用户性别为男</button></p>
    <p><button @click="change">修改用户年龄为18</button></p>
    <p><button @click="deleteH">删除用户身高信息</button></p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 用户信息
      userMsg: {
        name: 'zs',
        age: '20',
        height: '180',
      }
    }
  },
  methods: {
    // 为对象直接添加数据
    add() {
      // this.userMsg.sex = '男'
      let newUserMsg = { ...this.userMsg }
      newUserMsg.sex = '男'
      this.userMsg = newUserMsg
      console.log('添加性别后')
      console.log(this.userMsg)
    },
    change() {
      this.userMsg.age = '18'
      console.log('修改数据年龄后')
      console.log(this.userMsg)
    },
    deleteH() {
      let newUserMsg = { ...this.userMsg }
      delete newUserMsg.height
      this.userMsg = newUserMsg
      console.log('删除身高数据后')
      console.log(this.userMsg)
    }
  },
}
</script>
<style>
  .home{
    margin: 0 auto;
    text-align: center;
  }
</style>
效果
点击了添加用户性别为男按钮-数据已经添加 dom元素更新

 点击了删除用户身高信息按钮-数据已经修改 dom元素更新
方案二：使用 this.$set(); 来添加对象属性、使用this.$delete();来删除属性。
原理：
  • Vue.set(obj, key, value)：将响应式对象 obj 的属性 key 设置为 value，如果 obj 是响应式的，则确保这个属性也是响应式的，并触发视图更新。
  • Vue.delete(obj, key)：删除响应式对象 obj 的属性 key，并触发视图更新。
代码
<template>
  <div class="home">
    <h3>这是vue2测试页面</h3>
    <p>用户信息: {{ userMsg }} </p>
    <p><button @click="add">添加用户性别为男</button></p>
    <p><button @click="change">修改用户年龄为18</button></p>
    <p><button @click="deleteH">删除用户身高信息</button></p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 用户信息
      userMsg: {
        name: 'zs',
        age: '20',
        height: '180',
      }
    }
  },
  methods: {
    // 为对象直接添加数据
    add() {
      // this.userMsg.sex = '男'
      // let newUserMsg = { ...this.userMsg }
      // newUserMsg.sex = '男'
      // this.userMsg = newUserMsg
      this.$set(this.userMsg, 'sex', '男');
      console.log('添加性别后')
      console.log(this.userMsg)
    },
    change() {
      this.userMsg.age = '18'
      console.log('修改数据年龄后')
      console.log(this.userMsg)
    },
    deleteH() {
      // let newUserMsg = { ...this.userMsg }
      // delete newUserMsg.height
      // this.userMsg = newUserMsg
      this.$delete(this.userMsg, 'height');
      console.log('删除身高数据后')
      console.log(this.userMsg)
    }
  },
}
</script>
<style>
  .home{
    margin: 0 auto;
    text-align: center;
  }
</style>
 效果
点击了添加用户性别为男按钮-数据已经添加 dom元素更新

 点击了删除用户身高信息按钮-数据已经修改 dom元素更新

场景2:

直接为data里的数组通过直接修改索引对应的值，页面未能渲染最新数据、即未触发dom的更新。

演示代码

<template>
  <div class="home">
    <h3>这是vue2测试页面</h3>
    <!-- <p>用户信息: {{ userMsg }} </p> -->
    <p>用户家人信息: {{ userMsg.family }} </p>
    <!-- <p><button @click="add">添加用户性别为男</button></p>
    <p><button @click="change">修改用户年龄为18</button></p>
    <p><button @click="deleteH">删除用户身高信息</button></p> -->
    <p><button @click="changeFather">修改父亲信息</button></p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 用户信息
      userMsg: {
        name: 'zs',
        age: '20',
        height: '180',
        family: [{ name: 'father', age: '45', sex: '男' }, { name: 'mother', age: '42', sex: '女' }]
      }
    }
  },
  methods: {
    // 为对象直接添加数据
    add() {
      // this.userMsg.sex = '男'
      // let newUserMsg = { ...this.userMsg }
      // newUserMsg.sex = '男'
      // this.userMsg = newUserMsg
      this.$set(this.userMsg, 'sex', '男');
      console.log('添加性别后')
      console.log(this.userMsg)
    },
    change() {
      this.userMsg.age = '18'
      console.log('修改数据年龄后')
      console.log(this.userMsg)
    },
    deleteH() {
      // let newUserMsg = { ...this.userMsg }
      // delete newUserMsg.height
      // this.userMsg = newUserMsg
      this.$delete(this.userMsg, 'height');
      console.log('删除身高数据后')
      console.log(this.userMsg)
    },
    // 修改父亲信息
    changeFather() {
      this.userMsg.family[0] = { name: 'father', age: '40', sex: '男' ,height: '180'}
      // this.userMsg.family[0].age = '40' // dom 是会更新的
      console.log('修改后的父亲信息')
      console.log(this.userMsg.family)
    },
  },
}
</script>
<style>
  .home{
    margin: 0 auto;
    text-align: center;
  }
</style>

图示

点击了修改父亲信息按钮、数据更新成功、但是页面未同步渲染、即为dom未更新

解决方案

和场景一差不多

方案一 浅拷贝数组每条数据到一个新数组 对浅拷贝的数组数据操作 将浅拷贝的数组数据赋值给数组数据

方案二 this.$set() 方法

<template>
  <div class="home">
    <h3>这是vue2测试页面</h3>
    <!-- <p>用户信息: {{ userMsg }} </p> -->
    <p>用户家人信息: {{ userMsg.family }} </p>
    <!-- <p><button @click="add">添加用户性别为男</button></p>
    <p><button @click="change">修改用户年龄为18</button></p>
    <p><button @click="deleteH">删除用户身高信息</button></p> -->
    <p><button @click="changeFather">修改父亲信息</button></p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 用户信息
      userMsg: {
        name: 'zs',
        age: '20',
        height: '180',
        family: [{ name: 'father', age: '45', sex: '男' }, { name: 'mother', age: '42', sex: '女' }]
      },
    }
  },
  methods: {
    // 为对象直接添加数据
    add() {
      // this.userMsg.sex = '男'
      // let newUserMsg = { ...this.userMsg }
      // newUserMsg.sex = '男'
      // this.userMsg = newUserMsg
      this.$set(this.userMsg, 'sex', '男');
      console.log('添加性别后')
      console.log(this.userMsg)
    },
    change() {
      this.userMsg.age = '18'
      console.log('修改数据年龄后')
      console.log(this.userMsg)
    },
    deleteH() {
      // let newUserMsg = { ...this.userMsg }
      // delete newUserMsg.height
      // this.userMsg = newUserMsg
      this.$delete(this.userMsg, 'height');
      console.log('删除身高数据后')
      console.log(this.userMsg)
    },
    // 修改父亲信息
    changeFather() {
      // this.userMsg.family[0] = { name: 'father', age: '40', sex: '男' ,height: '180'}
      // this.userMsg.family[0].age = '40' // dom 是会更新的

      // 方案一 浅拷贝数组每条数据到一个新数组 对浅拷贝的数组数据操作 将浅拷贝的数组数据赋值给数组数据
      let newArr = [ ...this.userMsg.family ]
      newArr[0] = { name: 'father', age: '40', sex: '男' ,height: '180'}
      this.userMsg.family = newArr
      console.log(this.userMsg)

      // 方案二 this.$set() 方法
      // this.$set(this.userMsg.family, 0, { name: 'father', age: '40', sex: '男' });
    },
  },
}
</script>
<style>
  .home{
    margin: 0 auto;
    text-align: center;
  }
</style>

四、简化版的数据劫持源码

// 定义一个构造函数 Dep，用于收集依赖和通知更新
function Dep() {
  this.subs = [];
}

Dep.prototype = {
  addSub(sub) {
    this.subs.push(sub);
  },
  notify() {
    this.subs.forEach(sub => {
      sub.update();
    });
  }
};

// 定义一个监听器 Observer，用于劫持对象的属性
function Observer(data) {
  this.data = data;
  this.walk(data);
}

Observer.prototype = {
  walk(data) {
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key]);
    });
  },
  defineReactive(data, key, val) {
    const dep = new Dep();
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        if (Dep.target) {
          dep.addSub(Dep.target);
        }
        return val;
      },
      set(newVal) {
        if (val === newVal) {
          return;
        }
        val = newVal;
        dep.notify();
      }
    });
  }
};

// 定义一个 Watcher，用于进行依赖收集和更新
function Watcher(vm, exp, cb) {
  this.vm = vm;
  this.exp = exp;
  this.cb = cb;
  this.value = this.get();
}

Watcher.prototype = {
  get() {
    Dep.target = this;
    const value = this.vm[this.exp];
    Dep.target = null;
    return value;
  },
  update() {
    const value = this.vm[this.exp];
    this.cb.call(this.vm, value);
  }
};

// 宮户 Vue 构造函数
function Vue(options) {
  this.data = options.data;
  new Observer(this.data);
  // 初始化一个 Watcher 对象，用于触发依赖收集
  new Watcher(this, 'data', () => {
    console.log('数据更新了');
  });

  // 其他 Vue 相关逻辑...
}

// 创建一个 Vue 实例
var vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
});

// 修改数据，触发更新
vm.data.message = 'Hello, New Vue!';

Hush755
关注
Vue2响应式原理
m0_51431448的博客
05-04 1562
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.c
vue后端管理系统-基于koa2服务端实现的vue后台管理系统.zip
04-04
下面将详细探讨 Vue 和 Koa2 在这个系统中的应用以及相关知识点。 Vue.js 是一个轻量级、高性能的前端 MVVM 框架，它的主要特点是组件化、响应式数据绑定和易于上手。在 Vue 后台管理系统中，Vue 负责处理用户界面...
【Vue2】详解 Vue2 响应式原理
小秀的博客
03-21 2804
数据变化，视图会自动变化。侵入式就是调用一些api使得当数据变化的时候，视图会跟着变化。然后Vue使用的是非侵入式。响应式数据的目标就是，当对象本身或者对象属性发生变化时，就会运行一些函数，比如 render 函数。基础使用： 封装： 接下来就要上强度了(😥呜呜呜~)。这个方法像上面讲的一样，就是用来做数据劫持的。用observe方法监视子节点的变化(数据劫持)，就是为子节点设置对象属性，而这个属性其实就是Observer类的实例对象。 index.js observe.js 为传入的对象配置监听(劫
VUE2数据响应式源码实现
最新发布
erqiae的博客
10-16 797
通过自定义defineReactive函数对Object.defineProperty进行封装，并进行导出//传的值等于对象本身的值get() {console.log('访问了' + key + '属性');return val;},console.log('修改了' + key + '属性');})observe函数会在下文中进行讲解。
vue2 是怎么实现响应式的
hahahhahahahha123456的博客
08-18 348
今天看了一下vue到底是怎么实现响应式的，发现特别简单， 就是使用了 Object.defineProperty 这个函数来进行监听， var vm = {}; var data = { name: 'zhangsan', age: 18 } var key , value; for ( key in data) { .
vue2的响应式原理
xiaoyuqwer的博客
03-15 1255
vue2的响应式原理 首先用observer方法观察data数据 如果是普通的数据，string，number，Boolean数据，则直接return target，然后遍历target中的数据，在遍历函数中调用defineReactive方法，在defineReactive方法中调用object.defineProperty方法，在其中设置get和set方法，将数据变成响应式数据，set中会接收newValue，用新值取代老值，而且渲染更新视图 2. 如果是data中的对象数据，改变对象中的数据时，
vue2响应式原理
m0_54581080的博客
07-28 9151
我们要明白，响应式的最终目标：是当对象本身或对象属性发生变化时，会运行一些函数，最常见的就是 render 函数。不是只有 render，只要数据发生了变化后运行了一些函数，就是响应式,比如 watch。...
vue后端管理系统-基于IVIEW实现的VUE后端管理系统.zip
04-04
本项目是基于 Vue.js 框架和 iView UI 组件库实现的一个实例，提供了完整的前端解决方案，帮助开发者快速搭建功能丰富的后台系统。 Vue.js 是一个轻量级的渐进式框架，它的核心库专注于视图层，易于上手，同时通过...
Vue2和Vue3响应式原理实现的核心
九仞山的专栏
06-06 311
详细介绍了Vue2和Vue3响应式原理实现的核心
前端-Vue3.x-知识图谱
02-19
1. **Proxy-based响应式系统**：Vue3使用ES6的Proxy替代了Vue2中的Object.defineProperty，实现了更底层的数据变化检测，提升了性能和响应速度。 2. **Ref与Reactive**：`ref`用于创建响应式引用，可以直接修改值并...
基于SpringBoot+Vue的前后端分离仓储管理系统设计与实现
11-29
《基于SpringBoot+Vue的前后端分离仓储管理系统设计与实现》 ...通过以上关键技术的综合运用，"基于SpringBoot+Vue的前后端分离仓储管理系统"得以实现，为企业提供了一套高效、易用的仓储管理解决方案。
理解vue2中的响应式数据
weixin_47359038的博客
03-31 773
通过首次渲染组件中将数据处理成响应式数据的逻辑来理解vue2中的响应式数据，主要是使用了Object.defineProperty()数据劫持，Dep类进行依赖收集与订阅通知，Watcher类进行视图更新与依赖更新等。
vue2响应式系统是如何实现的（手写）
Jarvan_I的博客
09-13 821
每个属性都有一个或多个“观察者”（Watcher），当属性值发生变化时，Vue会通知所有依赖于该属性的观察者。为了解决这些限制，Vue 3引入了基于Proxy的响应式系统，它解决了上述许多问题，例如对属性的动态添加和删除、更好的性能以及原生支持。：基本数据类型（如字符串、数字、布尔值）是响应式的，但它们是不可变的，这意味着你不能通过直接修改它们来触发更新。：Vue的响应式系统可以自动侦测嵌套对象或数组的变化，但如果数据结构非常深，性能可能会受到影响。，这意味着它只能侦测属性的变化，而不是对象或数组的变化。
Vue2响应式原理简易实现
weixin_42230222的博客
07-01 463
1 响应式原理概括 2 响应式原理代码实现 class Vue { constructor(options = {}) { // 1.保存数据 this.$options = options; this.$data = typeof options.data === 'function' ? options.data() : options.data; this.$el = options.el; // 2.将thi
Vue2的响应式原理
m0_46143427的博客
05-13 8312
--------Vue2响应式原理---------- 原理：通过数据劫持 defineProperty + 发布订阅者模式，当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者，这里在编译模板时就会初始化每一属性的 watcher，在数据发生更新后调用 set 时会通知发布者 notify 通知对应的订阅者做出数据更新，同时将新的数据根性到视图上显示。缺陷：只能够监听初始化
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值