Vue2、Vue3响应式数据原理实现(双向绑定)

我不是女神ヾ 2022-09-03 15:16 142阅读 0赞

### Vue2 ###

// 在对象中添加一个属性与存取描述符的示例
    var bValue = {name:"zs",age:18};
    var o = {};
    Object.defineProperty(o, "name", {
      get : function(){
        console.log('监听正在获取name')
        return bValue.name;
      },
      set : function(newValue){
        console.log('监听正在设置b')
        bValue.name = newValue;
      },
      enumerable : true,
      configurable : true
    });
    
    o.name = "ls";
    console.log(o.name) //ls

### Vue3 ###

![20210815220347902.png][]

<script>
          var data = { name: "zs" };
          var p = new Proxy(data, {
            get(target, key) {
              console.log(`有人读取了p身上的${key}属性`);
              return Reflect.get(target, key);
            },
            set(target, key, val) {
              console.log(`有人修改了p身上的${key}属性`);
              return Reflect.set(target, key, val);
            },
            deleteProperty(target, key) {
              console.log(`有人删除了p身上的${key}属性`);
              return Reflect.deleteProperty(target, key);
            },
          });
          p.name = "du"; //修改
          console.log(p.name); //有人读取了p身上的name属性 zs
          console.log(delete p.name); //有人删除了p身上的name属性 true
        </script>

<script>
    export default {
      setup() {
        // ref和reactive底层实现
        // reactive
        function reactive(obj) {
          // 首先判断obj的类型
          if (typeof obj === "object") {
            if (obj instanceof Array) {
              // 如果是数组那么取出数组中的每一个元素，判断每一个元素是否又是对象，如果是对象也需要包装成Proxy
              obj.forEach((item) => {
                if (typeof (item, index) === "object") {
                  item[index] = reactive(item);
                }
              });
            } else {
              // 如若是对象 取出对象中的每一个值 判断对象的属性的值是否又是对象，如果是也需要包装成Proxy
              for (let key in obj) {
                if (typeof obj[key] === "object") {
                  obj[key] = reactive(obj[key]);
                }
              }
            }
          } else {
            console.warn(`您传入的内容: ${obj}不是一个对象`);
          }
          return new Proxy(obj, {
            //target 代表传入的obj对象
            get(target, key) {
              console.log(`有人读取了obj身上的${key}，我要去更新界面了`);
              return target[key];
            },
            set(target, key, value) {
              console.log( `有人改变了obj身上的${key}，我要去更新界面了`);
              target[key] = value;
              return true; // 表示当前操作成功 继续执行下一步
            },
            deleteProperty(target,key){
              console.log(`有人删除了obj身上的${key}，我要去更新界面了`);
              return delete target[key];
            },
          });
        }
    
        // ref
        function ref(val) {
          return reactive({ value: val });
        }
    
        let obj1 = {
          name1: "a",
          age: 18,
          children: {
            name2: "aa",
            age: 19,
            children: {
              name3: "aaa",
              age: 20,
            },
          },
        };
        let obj2 = {
          name: "du",
        };
        let state = reactive(obj1);
        let state2 = reactive(obj2);
        state2.name = "zhang";
        delete state.name
    
        state.name1 = "b";
        state.children.name2 = "bb";
        state.children.children.nae3 = "bbb";
    
        console.log(state);
        console.log(state2);
      },
    };
    </script>

[20210815220347902.png]: /images/20220829/a2c5ddcbce2647a9b224d342667657be.png

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue双向数据绑定原理

Vue双向数据绑定原理前端面试必问的一道面试题 vue采用MVVM模式，数据劫持结合开发者-订阅者模式，通过Object.defineProperty()劫持各个属

淩亂°似流年/ 2022年12月18日 14:57/ 0 赞/ 108 阅读

相关模拟Vue数据响应双向绑定原理

文章目录 Vue双向绑定 1.数据驱动 2.数据响应式核心原理（vue 2.x） 3.发布订阅模式和观察者模式

谁借莪１个温暖的怀抱￠/ 2022年11月18日 04:55/ 0 赞/ 212 阅读

相关 Vue源码解析：数据双向绑定(响应式)原理

vue的双向数据绑定（响应式）原理到底是什么呢？这还是得从vue的源码说起：我们知道vue的一大特点是`数据驱动视图`，如何理解数据驱动视图这六个字呢？数据：state

灰太狼/ 2022年11月04日 01:00/ 0 赞/ 173 阅读

相关 Vue2、Vue3响应式数据原理实现(双向绑定)

Vue2 // 在对象中添加一个属性与存取描述符的示例 var bValue = {name:"zs",age:18}; var o = {};

我不是女神ヾ/ 2022年09月03日 15:16/ 0 赞/ 143 阅读

相关 vue响应式原理（数据双向绑定的原理）

先来了解一下几个相关概念 1、渐进式框架下面是摘自知乎的一个解答（个人认为讲述比较好的回答）：在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己

清疚/ 2022年05月29日 05:17/ 0 赞/ 300 阅读

相关浅谈VUE响应式双向绑定

区别于公司产品的老项目前端部分大量运用Jquery框架，使用现代主流前端框架开发产品均使用数据驱动视图的方式，隐藏了如JQ的DOM操作改变视图的方式，即现代前端框架采用声明式编

╰+哭是因爲堅強的太久メ/ 2022年03月16日 13:37/ 0 赞/ 175 阅读

相关 Vue 双向数据绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过`Object.defineProperty()`来劫持各个属性的`setter`，`getter`

曾经终败给现在/ 2022年03月11日 05:37/ 0 赞/ 270 阅读

相关 vue双向数据绑定原理

前言 > 这个解答可回答面试中 ① vue双向数据绑定原理和 ② vue响应原理问题基本原理 vue.js 是采用数据劫持结合发布者-订阅者模式的方

你的名字/ 2022年01月31日 16:59/ 0 赞/ 239 阅读

相关 vue实现数据双向绑定原理实现

直接上代码吧： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

蔚落/ 2022年01月30日 11:49/ 0 赞/ 259 阅读

相关 vue双向数据绑定原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2021年07月26日 22:52/ 0 赞/ 489 阅读