devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：不正经 | 2024-03-18 22:59:24

赞

踩

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

一、概念

        在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的更新。

演示代码

  1. <template>
  2.   <div class="home">
  3.     <h3>这是vue2测试页面</h3>
  4.     <p>用户信息: {{ userMsg }} </p>
  5.     <p><button @click="add">添加用户性别为男</button></p>
  6.     <p><button @click="change">修改用户年龄为18</button></p>
  7.     <p><button @click="deleteH">删除用户身高信息</button></p>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12.  
  13. export default {
  14.   data() {
  15.     return {
  16.       // 用户信息
  17.       userMsg: {
  18.         name: 'zs',
  19.         age: '20',
  20.         height: '180',
  21.       }
  22.     }
  23.   },
  24.   methods: {
  25.     // 为对象直接添加数据
  26.     add() {
  27.       this.userMsg.sex = '男'
  28.       console.log('添加性别后')
  29.       console.log(this.userMsg)
  30.     },
  31.     change() {
  32.       this.userMsg.age = '18'
  33.       console.log('修改数据年龄后')
  34.       console.log(this.userMsg)
  35.     },
  36.     deleteH() {
  37.       delete this.userMsg.height
  38.       console.log('删除身高数据后')
  39.       console.log(this.userMsg)
  40.     }
  41.   },
  42. }
  43. </script>
  44. <style>
  45.   .home{
  46.     margin: 0 auto;
  47.     text-align: center;
  48.   }
  49. </style>

图示

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

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

解决方案

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

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

代码
  1. <template>
  2.   <div class="home">
  3.     <h3>这是vue2测试页面</h3>
  4.     <p>用户信息: {{ userMsg }} </p>
  5.     <p><button @click="add">添加用户性别为男</button></p>
  6.     <p><button @click="change">修改用户年龄为18</button></p>
  7.     <p><button @click="deleteH">删除用户身高信息</button></p>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12.  
  13. export default {
  14.   data() {
  15.     return {
  16.       // 用户信息
  17.       userMsg: {
  18.         name: 'zs',
  19.         age: '20',
  20.         height: '180',
  21.       }
  22.     }
  23.   },
  24.   methods: {
  25.     // 为对象直接添加数据
  26.     add() {
  27.       // this.userMsg.sex = '男'
  28.       let newUserMsg = { ...this.userMsg }
  29.       newUserMsg.sex = '男'
  30.       this.userMsg = newUserMsg
  31.       console.log('添加性别后')
  32.       console.log(this.userMsg)
  33.     },
  34.     change() {
  35.       this.userMsg.age = '18'
  36.       console.log('修改数据年龄后')
  37.       console.log(this.userMsg)
  38.     },
  39.     deleteH() {
  40.       let newUserMsg = { ...this.userMsg }
  41.       delete newUserMsg.height
  42.       this.userMsg = newUserMsg
  43.       console.log('删除身高数据后')
  44.       console.log(this.userMsg)
  45.     }
  46.   },
  47. }
  48. </script>
  49. <style>
  50.   .home{
  51.     margin: 0 auto;
  52.     text-align: center;
  53.   }
  54. </style>
效果
点击了添加用户性别为男按钮-数据已经添加 dom元素更新

 点击了删除用户身高信息按钮-数据已经修改 dom元素更新
方案二：使用 this.$set(); 来添加对象属性、使用this.$delete();来删除属性。
原理：
  • Vue.set(obj, key, value)：将响应式对象 obj 的属性 key 设置为 value，如果 obj 是响应式的，则确保这个属性也是响应式的，并触发视图更新。
  • Vue.delete(obj, key)：删除响应式对象 obj 的属性 key，并触发视图更新。
代码
  1. <template>
  2.   <div class="home">
  3.     <h3>这是vue2测试页面</h3>
  4.     <p>用户信息: {{ userMsg }} </p>
  5.     <p><button @click="add">添加用户性别为男</button></p>
  6.     <p><button @click="change">修改用户年龄为18</button></p>
  7.     <p><button @click="deleteH">删除用户身高信息</button></p>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12.  
  13. export default {
  14.   data() {
  15.     return {
  16.       // 用户信息
  17.       userMsg: {
  18.         name: 'zs',
  19.         age: '20',
  20.         height: '180',
  21.       }
  22.     }
  23.   },
  24.   methods: {
  25.     // 为对象直接添加数据
  26.     add() {
  27.       // this.userMsg.sex = '男'
  28.       // let newUserMsg = { ...this.userMsg }
  29.       // newUserMsg.sex = '男'
  30.       // this.userMsg = newUserMsg
  31.       this.$set(this.userMsg, 'sex', '男');
  32.       console.log('添加性别后')
  33.       console.log(this.userMsg)
  34.     },
  35.     change() {
  36.       this.userMsg.age = '18'
  37.       console.log('修改数据年龄后')
  38.       console.log(this.userMsg)
  39.     },
  40.     deleteH() {
  41.       // let newUserMsg = { ...this.userMsg }
  42.       // delete newUserMsg.height
  43.       // this.userMsg = newUserMsg
  44.       this.$delete(this.userMsg, 'height');
  45.       console.log('删除身高数据后')
  46.       console.log(this.userMsg)
  47.     }
  48.   },
  49. }
  50. </script>
  51. <style>
  52.   .home{
  53.     margin: 0 auto;
  54.     text-align: center;
  55.   }
  56. </style>
 效果
点击了添加用户性别为男按钮-数据已经添加 dom元素更新

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

场景2:

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

演示代码

  1. <template>
  2.   <div class="home">
  3.     <h3>这是vue2测试页面</h3>
  4.     <!-- <p>用户信息: {{ userMsg }} </p> -->
  5.     <p>用户家人信息: {{ userMsg.family }} </p>
  6.     <!-- <p><button @click="add">添加用户性别为男</button></p>
  7.     <p><button @click="change">修改用户年龄为18</button></p>
  8.     <p><button @click="deleteH">删除用户身高信息</button></p> -->
  9.     <p><button @click="changeFather">修改父亲信息</button></p>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14.  
  15. export default {
  16.   data() {
  17.     return {
  18.       // 用户信息
  19.       userMsg: {
  20.         name: 'zs',
  21.         age: '20',
  22.         height: '180',
  23.         family: [{ name: 'father', age: '45', sex: '男' }, { name: 'mother', age: '42', sex: '女' }]
  24.       }
  25.     }
  26.   },
  27.   methods: {
  28.     // 为对象直接添加数据
  29.     add() {
  30.       // this.userMsg.sex = '男'
  31.       // let newUserMsg = { ...this.userMsg }
  32.       // newUserMsg.sex = '男'
  33.       // this.userMsg = newUserMsg
  34.       this.$set(this.userMsg, 'sex', '男');
  35.       console.log('添加性别后')
  36.       console.log(this.userMsg)
  37.     },
  38.     change() {
  39.       this.userMsg.age = '18'
  40.       console.log('修改数据年龄后')
  41.       console.log(this.userMsg)
  42.     },
  43.     deleteH() {
  44.       // let newUserMsg = { ...this.userMsg }
  45.       // delete newUserMsg.height
  46.       // this.userMsg = newUserMsg
  47.       this.$delete(this.userMsg, 'height');
  48.       console.log('删除身高数据后')
  49.       console.log(this.userMsg)
  50.     },
  51.     // 修改父亲信息
  52.     changeFather() {
  53.       this.userMsg.family[0] = { name: 'father', age: '40', sex: '男' ,height: '180'}
  54.       // this.userMsg.family[0].age = '40' // dom 是会更新的
  55.       console.log('修改后的父亲信息')
  56.       console.log(this.userMsg.family)
  57.     },
  58.   },
  59. }
  60. </script>
  61. <style>
  62.   .home{
  63.     margin: 0 auto;
  64.     text-align: center;
  65.   }
  66. </style>

图示

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

解决方案

和场景一差不多

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

方案二 this.$set() 方法

  1. <template>
  2.   <div class="home">
  3.     <h3>这是vue2测试页面</h3>
  4.     <!-- <p>用户信息: {{ userMsg }} </p> -->
  5.     <p>用户家人信息: {{ userMsg.family }} </p>
  6.     <!-- <p><button @click="add">添加用户性别为男</button></p>
  7.     <p><button @click="change">修改用户年龄为18</button></p>
  8.     <p><button @click="deleteH">删除用户身高信息</button></p> -->
  9.     <p><button @click="changeFather">修改父亲信息</button></p>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14.  
  15. export default {
  16.   data() {
  17.     return {
  18.       // 用户信息
  19.       userMsg: {
  20.         name: 'zs',
  21.         age: '20',
  22.         height: '180',
  23.         family: [{ name: 'father', age: '45', sex: '男' }, { name: 'mother', age: '42', sex: '女' }]
  24.       },
  25.     }
  26.   },
  27.   methods: {
  28.     // 为对象直接添加数据
  29.     add() {
  30.       // this.userMsg.sex = '男'
  31.       // let newUserMsg = { ...this.userMsg }
  32.       // newUserMsg.sex = '男'
  33.       // this.userMsg = newUserMsg
  34.       this.$set(this.userMsg, 'sex', '男');
  35.       console.log('添加性别后')
  36.       console.log(this.userMsg)
  37.     },
  38.     change() {
  39.       this.userMsg.age = '18'
  40.       console.log('修改数据年龄后')
  41.       console.log(this.userMsg)
  42.     },
  43.     deleteH() {
  44.       // let newUserMsg = { ...this.userMsg }
  45.       // delete newUserMsg.height
  46.       // this.userMsg = newUserMsg
  47.       this.$delete(this.userMsg, 'height');
  48.       console.log('删除身高数据后')
  49.       console.log(this.userMsg)
  50.     },
  51.     // 修改父亲信息
  52.     changeFather() {
  53.       // this.userMsg.family[0] = { name: 'father', age: '40', sex: '男' ,height: '180'}
  54.       // this.userMsg.family[0].age = '40' // dom 是会更新的
  55.  
  56.       // 方案一 浅拷贝数组每条数据到一个新数组 对浅拷贝的数组数据操作 将浅拷贝的数组数据赋值给数组数据
  57.       let newArr = [ ...this.userMsg.family ]
  58.       newArr[0] = { name: 'father', age: '40', sex: '男' ,height: '180'}
  59.       this.userMsg.family = newArr
  60.       console.log(this.userMsg)
  61.  
  62.       // 方案二 this.$set() 方法
  63.       // this.$set(this.userMsg.family, 0, { name: 'father', age: '40', sex: '男' });
  64.     },
  65.   },
  66. }
  67. </script>
  68. <style>
  69.   .home{
  70.     margin: 0 auto;
  71.     text-align: center;
  72.   }
  73. </style>

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

  1. // 定义一个构造函数 Dep，用于收集依赖和通知更新
  2. function Dep() {
  3.   this.subs = [];
  4. }
  5.  
  6. Dep.prototype = {
  7.   addSub(sub) {
  8.     this.subs.push(sub);
  9.   },
  10.   notify() {
  11.     this.subs.forEach(sub => {
  12.       sub.update();
  13.     });
  14.   }
  15. };
  16.  
  17. // 定义一个监听器 Observer，用于劫持对象的属性
  18. function Observer(data) {
  19.   this.data = data;
  20.   this.walk(data);
  21. }
  22.  
  23. Observer.prototype = {
  24.   walk(data) {
  25.     Object.keys(data).forEach(key => {
  26.       this.defineReactive(data, key, data[key]);
  27.     });
  28.   },
  29.   defineReactive(data, key, val) {
  30.     const dep = new Dep();
  31.     Object.defineProperty(data, key, {
  32.       enumerable: true,
  33.       configurable: true,
  34.       get() {
  35.         if (Dep.target) {
  36.           dep.addSub(Dep.target);
  37.         }
  38.         return val;
  39.       },
  40.       set(newVal) {
  41.         if (val === newVal) {
  42.           return;
  43.         }
  44.         val = newVal;
  45.         dep.notify();
  46.       }
  47.     });
  48.   }
  49. };
  50.  
  51. // 定义一个 Watcher，用于进行依赖收集和更新
  52. function Watcher(vm, exp, cb) {
  53.   this.vm = vm;
  54.   this.exp = exp;
  55.   this.cb = cb;
  56.   this.value = this.get();
  57. }
  58.  
  59. Watcher.prototype = {
  60.   get() {
  61.     Dep.target = this;
  62.     const value = this.vm[this.exp];
  63.     Dep.target = null;
  64.     return value;
  65.   },
  66.   update() {
  67.     const value = this.vm[this.exp];
  68.     this.cb.call(this.vm, value);
  69.   }
  70. };
  71.  
  72. // 宮户 Vue 构造函数
  73. function Vue(options) {
  74.   this.data = options.data;
  75.   new Observer(this.data);
  76.   // 初始化一个 Watcher 对象，用于触发依赖收集
  77.   new Watcher(this, 'data', () => {
  78.     console.log('数据更新了');
  79.   });
  80.  
  81.   // 其他 Vue 相关逻辑...
  82. }
  83.  
  84. // 创建一个 Vue 实例
  85. var vm = new Vue({
  86.   data: {
  87.     message: 'Hello, Vue!'
  88.   }
  89. });
  90.  
  91. // 修改数据，触发更新
  92. vm.data.message = 'Hello, New Vue!';

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/266057
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号