vue2响应式原理分析

幼儿园园长~

已于 2022-07-19 16:18:51 修改

阅读量1.5k

点赞数

分类专栏： vue.js JavaScript 文章标签： mysql 数据库 database

于 2021-11-30 00:09:20 首次发布

本文链接：https://blog.csdn.net/weixin_40981660/article/details/121589434

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 5 订阅

订阅专栏

vue.js

6 篇文章 0 订阅

订阅专栏

vue响应式原理分析之vue2

文章目录

vue响应式原理分析之vue2
前言
一、知识储备：Object.defineProperty
- 1.obj对象自定义设置
- 1.obj对象自定义操作
二、实践：通过Object.defineProperty写一个简单vue2响应式
总结

前言

vue学到后面需要对响应式源码原理进行剖析，里面蕴含着观察者模式和发布-订阅的模式，对提高编程思维有很多的帮助哦

vue2.x版本和vue3.x版本的响应式实现有所不同，我们将分别进行详解。首先我们来了解这两个基本事实

(1)vue2.x版本响应式基于ES5的Object.defineProperty实现

(2)Vue3.x版本响应式基于ES6(es2015)的Proxy实现

接下来我们先认识Object.defineProperty基本用法

一、知识储备：Object.defineProperty

1.obj对象自定义设置

我们定义一个obj对象

var obj = {
  name: 'william',
  age: 18
}

如果我们想给obj对象增加一个值，通常是使用【obj.name2=“张三”】方式新建一个键值对。如果我们希望对新键值对进行一些配置，比如说不可修改、不可枚举、不可重新定义，这又该怎么办呢？

此时需要用到Object.defineProperty

var obj = {
  name: 'william',
  age: 18
}

// Object.defineProperty() 操作演示与回顾
Object.defineProperty(obj, 'gender', {
  value: '男', // 设置键gender对应的值
  writable: true, // 设置键gender的值可修改
  enumerable: true, // 设置gender可遍历的，比如可以被for遍历
  configurable: true // 可以配置的。即可以重新定义gender，就可以执行下面的代码了
 })

当设置enumerable(可枚举)、configurable(可重新配置)都为false时，那么以下两种方法都不可使用：

以下代码，【第1种方法】：重新对obj.gender进行配置不生效，因为一开始就设置了configurable: false不可重新配置；【第2种方法】：遍历obj不生效，因为设置了enumerable: false不可枚举

var obj = {
  name: 'william',
  age: 18
}

// Object.defineProperty() 操作演示与回顾
Object.defineProperty(obj, 'gender', {
  value: '男', // 设置键gender对应的值
  writable: false, // 设置键gender的值不可修改
  enumerable: false, // 设置gender不可枚举，比如不可以被for遍历
  configurable: false // 设置gender不可以重新配置的。 
 })
// 【第1种方法】：重新配置obj.gender可以枚举
Object.defineProperty(obj, 'gender', {
  enumerable: false // 重新设置gender不可枚举。前提是上面代码设置了configurable: true，因此这个重新给gender进行配置无效。
})
// 【第2种方法】：遍历obj不生效，因为设置了enumerable: false不可枚举
for (var k in obj) {
  console.log(k, obj[k])
}

接下来我们再来看看如何对obj对象进行自定义操作

1.obj对象自定义操作

对象自定义操作可以通过get和set实现，接下来我们通过代码去理解他们的用法

var obj = {
  name: 'william',
  age: 18
}

var genderValue = '男'
Object.defineProperty(obj, 'gender', {
  get () { // 获取gender值时候触发
    console.log('任意获取时需要的自定义操作')
    return genderValue
  },
  set (newValue) { // 设置gender值时候触发，newValue就是设置的值
    console.log('任意设置时需要的自定义操作')
    genderValue = newValue
  }
})

当我们尝试获取obj.gender时，就会触发get方法
在这里插入图片描述
当我们尝试给obj对象进行设置值时，就会触发set方法

由此不难看出，get方法在获取对象值时触发，set方法在给obj设置时触发，这个意味着我们可以在获取/设置元素时候自定义一些操作逻辑。

另外，get()除了obj.gender获取值时候触发，通过点击查看值就会触发，因为这样也是一种get值

请添加图片描述
容易犯的一个细节错误：

var obj = {
  name: 'william',
  age: 18
}

Object.defineProperty(obj, 'gender', {
  get () { // 获取gender值时候触发
    console.log('任意获取时需要的自定义操作')
    return '男'
  },
  set (newValue) { // 设置gender值时候触发
    this.gender = newValue // this指向obj，因为是obj调用gender
  }
})

newValue是设置新值的参数，那么this.gender = newValue又重新设置值，那么又会重新触发set方法，由此进入死循环了。

在这里插入图片描述
认识了Object.defineProperty基本用法后，我们开始写一个简单的vue2响应式原理

二、实践：通过Object.defineProperty写一个简单vue2响应式

1.单个属性数据驱动视图基础效果

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">原始内容</div>
  <script>
    // 声明数据对象，模拟 Vue 实例的 data 属性
    let data = {
      msg: 'hello'
    }
    // 模拟 Vue 实例的对象
    let vm = {}
    
    // 通过数据劫持的方式，将 data 的属性设置为 getter/setter
    Object.defineProperty(vm, 'msg', { // 前两个参数连起来表示为vm对象设置键msg，最后1个参数表示获取/设置msg键时候会触发的操作。
      // 可遍历
      enumerable: true,
      // 可配置
      configurable: true,
      get () {
        console.log('访问了属性')
        return data.msg
      },
      set (newValue) {
        // 更新数据
        data.msg = newValue
        // 数据更改，更新视图中 DOM 元素的内容
        document.querySelector('#app').textContent = data.msg
      }
    })
  </script>
</body>
</html>

我们简单讲一下这个代码实现功能：给vm实例对象注入"msg"键，然后通过(get)访问msg返回的是data内的msg值，(set)设置新的值时候，修改data内的msg值，并且更新到视图。

问题：该版本只是雏形，操作中只监听了一个属性，多个属性无法处理 → 问题解决：下面是处理多个属性方法，修改了某个属性就会更新视图。

2.多个属性数据驱动视图基础效果

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">原始内容</div>
    <script>
      // 声明数据对象，模拟 Vue 实例的 data 属性
      let data = {
        msg: "hello",
        ms2: "world",
      };
      // 模拟 Vue 实例的对象
      let vm = {};

      // 遍历被劫持对象的所有属性
      Object.keys(data).forEach((key) => { // Object.keys可以获取所有data对象所有属性值
        // Vue实例背后底层逻辑：通过数据劫持的方式，将 data 的属性设置为 getter/setter
        Object.defineProperty(vm, key, { // key是被劫持对象data的其中一个属性
          // 可遍历
          enumerable: true,
          // 可配置
          configurable: true,
          get() {
            console.log("访问了属性");
            return data[key];
          },
          set(newValue) {
            console.log("更新/修改了属性");
            // 更新数据
            data[key] = newValue;
            // 数据更改，更新视图中 DOM 元素的内容
            document.querySelector("#app").textContent = data[key];
          },
        });
      });
    </script>
  </body>
</html>

多个属性数据驱动视图和单个属性驱动视图是基本一致的，只需要额外关注一下这个方法：Object.keys可以获取所有data对象所有属性值。

另外，需要注意的是【我们给vm新增了1个属性，但是vm的属性，并不是data的】 → 因此，通过访问data是无法访问到新属性的

在这里插入图片描述

问题又出现：我们无法监听data.arr数组内部数据变化，比如

这需要更深层次地鉴定数组内部元素变化

3.(deep)更深层次地监听数组内部元素变化

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">原始内容</div>
  <script>
    // 声明数据对象，模拟 Vue 实例的 data 属性
    let data = {
      msg1: 'hello',
      msg2: 'world',
      arr: [1, 2, 3]
    }
    // 模拟 Vue 实例的对象
    let vm = {}

    // --- 添加数组方法支持 ---
    const arrMethodName = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']

    // 用于存储处理结果的对象，准备替换掉数组实例的原型指针 __proto__
    const customProto = {}

    // 为了避免数组实例无法再使用其他的数组方法
    customProto.__proto__ = Array.prototype

    arrMethodName.forEach(method => {
      customProto[method] = function () { //思想：customProto = { "push" : push方法+自定义更新视图 } → arr实例._proto__ = customProto(__proto__指针：就是往上面找方法) => 开始操作：arr实例.push(100,200) → data['arr']: [1,2,3,100,200]
        // 确保原始功能可以使用（this 为数组实例）
        const result = Array.prototype[method].apply(this, arguments)
        // 进行其他自定义功能设置，上一行代码更新arr后，再用新的this更新视图
        document.querySelector('#app').textContent = this
        // 有的数组操作有返回值比如pop，有的数组操作没有返回值，比如push
        return result
      }
    })

    // 遍历被劫持对象的所有属性
    Object.keys(data).forEach(key => {
      // 检测是否为数组
      if (Array.isArray(data[key])) {
        // 将当前数组实例的 __proto__ 更换为 customProto 即可
        data[key].__proto__ = customProto // __proto__指针：就是往上面找方法
      }

      // 通过数据劫持的方式，将 data 的属性设置为 getter/setter
      Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: true,
        get () {
          console.log('访问了属性')
          return data[key]
        },
        set (newValue) {
          // 更新数据
          data[key] = newValue
          // 数据更改，更新视图中 DOM 元素的内容
          document.querySelector('#app').textContent = data[key]
        }
      })
    })

  </script>
</body>
</html>

简单梳理一下代码方法：

为数组方法push、pop等方法增加一个方法，此处只是增加了document.querySelector(‘#app’).textContent = this，其他保持push原始方法不变。→ 然后遍历data，如果是数组就更改指针__proto__指针指向customProto。

如果data数据内部的内部还有对象，那么再继续进行数据劫持即可，因此下面实现封装与递归操作：

4.封装与递归操作。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue2响应式原理</title>
  </head>
  <body>
    <div id="app">原始内容</div>
    <script>
      // vuejs程序看到的data数据
      let data = {
        msg1: "hello",
        msg2: "world",
        arr: [1, 2, 3],
        obj: {
          name: "苏苏",
          age: 18,
        },
      };
      // 真正操作的对象，间接操作
      let vm = {};
      // 封装为函数，用于对数据进行响应式处理。在外部函数嵌套了一个内部函数，并且使用了外部函数的变量，由此就会形成一个闭包。
      const createReactive = (function () {
        const arrMethodName = [
          "push",
          "pop",
          "shift",
          "unshift",
          "splice",
          "sort",
          "reverse",
        ];
        const customProto = {};
        customProto.__proto__ = Array.prototype;
        arrMethodName.forEach((method) => {
          customProto[method] = function () {
            const result = Array.prototype[method].apply(this, arguments);
            document.querySelector("#app").textContent = this;
            return result;
          };
        });
        // 需要进行数据劫持的主体功能，也是递归时需要的功能
        return function (data, vm) {
          Object.keys(data).forEach((key) => {
            // 检测是否为数组。typeof数组返回也是object，所以先判断是否为数组；其次，data数据中只有数组or对象，因此排除了数组，那么下一个else if必然是对象。最后，需要注意的是，typeof null返回的也是object，因此需要加上data[key] != null判断
            if (Array.isArray(data[key])) {
              // 将当前数组实例的__proto__更换为customProto即可
              data[key].__proto__ = customProto;
            } else if (typeof data[key] === "object" && data[key] !== null) {
              // 检测是否为对象，如果为对象，进行递归操作。
              vm[key] = {}; // 类似【let vm={}】，在内部继续增加一个实例。★新增一个内存地址，Object.defineProperty操作就是这个内存地址。
              createReactive(data[key], vm[key]);
              return;
            }
            // 通过数据劫持的方式，将data的属性设置为getter/setter
            Object.defineProperty(vm, key, {
              // vm={}，key是data每个键
              enumerable: true,
              configurable: true,
              // writable: true, // 配置了这个就无法配置set
              get() {
                document.querySelector("#app").textContent = data[key];
                return data[key];
              },
              set(newValue) {
                data[key] = newValue;
                document.querySelector("#app").textContent = data[key];
              },
            });
          });
        };
      })();
      createReactive(data, vm);
    </script>
  </body>
</html>

总结

vue2响应式原理基于简单的Object.defineProperty方法，由此实现vm实例通过劫持data数据实时更新视图。

幼儿园园长~

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
vue2响应式原理分析

vue响应式原理分析之vue2提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录vue响应式原理分析之vue2前言一、认识Object.defineProperty1.obj对象自定义设置1.obj对象自定义操作二、使用步骤1.引入库2.读入数据总结前言vue学到后面需要对响应式源码原理进行剖析，里面蕴含着观察者模式和发布-订阅的模式，对提高编程
复制链接

扫一扫