Vue.js响应式原理（二）——响应式的核心原理

最新推荐文章于 2024-06-24 08:43:17 发布

晓萌的百宝袋

最新推荐文章于 2024-06-24 08:43:17 发布

阅读量218

点赞数

分类专栏： vue 文章标签： vue.js es6 前端 javascript

本文链接：https://blog.csdn.net/xiaozidewawa/article/details/108364988

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、数据响应式核心原理-Vue2.x版本

通过ES5提出的Object.defineProperty()实现，它是个无法shim（无法降级处理）的特性，故无法支持IE8及以下版本。

简单的解释说明：

在vue中把一个普通的js对象传入vue实例作为data选项，vue将遍历此对象所有的属性，并使用Object.defineProperty()把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是在内部它们让vue能够追踪依赖，在属性被访问和修改时通知变更。

使用Object.defineProperty()模拟vue2.x的数据响应式

Object.defineProperty的使用参考：深入浅出Object.defineProperty


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>defineProperty</title>
  </head>
  <body>
    <div id="app">hello,Object.defineProperty!!</div>
  </body>
  <script>
    // 1.模拟vue的data对象
    let data = {
      content: "",
      age: 10,
    };
    // 2.模拟vue2.x中使用Object.defineProperty()后的对象
    let vm = {};
    proxyData(data);
    // 3.使用Object.defineProperty()实现对普通js对象的处理
    function proxyData(data) {
            // 遍历js普通对象的所有属性
      Object.keys(data).forEach((key) => {
                // 使用Object.defineProperty将每一个data中的属性 转换成 vm 对象 的setter/getter
        Object.defineProperty(vm, key, {
                    // 是否可遍历
                    enmerable:true,
                    // 是否可配置（例如重新使用Object.defineProperty定义，使用delete删除等）
                    configurable:true,
          get() {
            console.log("get:", key, data[key]);
            return data[key];
          },
          set(value) {
            console.log("set:", key, value);
            if (value === data[key]) return;
                        data[key] = value;
                        // 数据变更，更新DOM的值
            document.querySelector("#app").textContent = data[key];
          },
        });
      });
    }
    // 4.测试
    vm.age = 20;
    console.log(vm.age);
  </script>
</html>

2、数据响应式核心原理-Vue3.x

通过ES6提出的Proxy代理实现，不支持IE。

注意：Proxy类实例化时，是针对整个对象，其中的get和set方法均具有参数，而Object.defineProperty是针对对象的某一个属性，且其中的get方法无参数，set方法参数只有新值。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>proxy</title>
  </head>
  <body>
    <div id="app">hi!!!</div>
    <script>
      // 1.模拟vue中的data选项
      let data = {
        msg: "initial",
        code: 10,
      };
      // 2.使用proxy代理data对象获取新对象
      let vm = new Proxy(data, {
        // 当访问vm的成员会执行
        get(target, key) {
          console.log("get, key: ", key, target[key]);
          return target[key];
        },
        // 当设置vm的成员会执行
        set(target, key, newVal) {
          console.log("set, key: ", key, newVal);
          if (target[key] === newVal) return;
          target[key] = newVal;
          document.querySelector("#app").textContent = target[key];
        },
      });

      // 3.测试
      vm.msg = "hello Ball";
      console.log(vm.msg);
    </script>
  </body>
</html>

晓萌的百宝袋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js响应式原理（二）——响应式的核心原理

1、数据响应式核心原理-Vue2.x版本通过ES5提出的Object.defineProperty()实现，它是个无法shim（无法降级处理）的特性，故无法支持IE8及以下版本。简单的解释说明：在vue中把一个普通的js对象传入vue实例作为data选项，vue将遍历此对象所有的属性，并使用Object.defineProperty()把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是在内部它们让vue能够追踪依赖，在属性被访问和修改时通知变更。
复制链接

扫一扫

专栏目录