Vue.js响应式原理（四）——模拟vue响应式原理

最新推荐文章于 2023-11-23 13:33:30 发布
最新推荐文章于 2023-11-23 13:33:30 发布
阅读量207 收藏 1
点赞数
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozidewawa/article/details/108399395
版权

分析

整体分析模拟最小版本的vue步骤：

  1. 观察Vue基本使用结构

  2. 打印Vue实例观察即将要模拟的成员：

    • 以_开头的是私有成员（例如_data），以 开 头 的 是 公 共 成 员 ( 例 如 ‘ 开头的是公共成员(例如` 开头的是公共成员(例如‘data`)，我们只模拟公共成员即可。
    • $el可以是选择器，也可以是dom对象，如果是选择器需要我们转换成dom对象进行存储。
    • 最小版本准备模拟$data、$el、$options

  3. 最小版本的vue的整体结构如下，即需要实现的几种类型。
    在这里插入图片描述
    不同类分别的作用如下：

  • Vue：把data中的成员注入到Vue实例，并且把data中的成员转成getter/setter；Vue内部会调用Observer和Compiler。
  • Observer（数据劫持）：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知Dep（发布者）
  • Compiler（解析指令）：解析每个元素中的指令及插值表达式，并替换成对应的数据
  • Dep（发布者）：添加观察者，当数据发生变化时通知所有观察者
  • Watcher（观察者）：有一个update方法，当数据变化负责更新视图。

实现

准备一个html，里面具有需要解析的结构，如下：

<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mini Vue</title>
  </head>
  <body>
    <!-- 需要被解析的html start -->
    <div id="app">
      <h1>差值表达式</h1>
      <h3>{{ msg }}</h3>
      <h3>{{ count }}</h3>
      <h1>v-text</h1>
      <div v-text="msg"></div>
      <h1>v-model</h1>
      <input type="text" v-model="msg" />
      <input type="text" v-model="count" />
    </div>
    <!-- 需要被解析的html end -->

    <!-- 自定义的类依次引入，需要被依赖的类优先引入 -->
    <!-- <script src="./js/dep.js"></script> -->
    <!-- <script src="./js/watcher.js"></script> -->
    <!--<script src="./js/compiler.js"></script> -->
    <!--<script src="./js/observer.js"></script> -->
    <!--<script src="./js/vue.js"></script> -->
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue",
          count: 100,
          person: { name: "zs" },
        },
      });
      console.log(vm.msg);
      // vm.msg = { test: "Hello" };
      vm.test = "abc";
    </script>
  </body>
</html>

Vue类

  • 功能：

    • 负责接收初始化的参数(选项)
    • 负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
    • 负责调用 observer 监听 data 中所有属性的变化
    • 负责调用 compiler 解析指令/插值表达式

  • 类图结构：
    在这里插入图片描述
    解释说明：

约定以 下划线 开头的成员都是私有成员。
_proxyData()：将data的属性转换成getter和setter，注入到vue实例中。

  • 代码：

class Vue {
  constructor(options) {
    // 1.保存选项的数据
    this.$options = options || {};
    this.$data = options.data || {};
    const el = options.el;
    this.$el = typeof el === "string" ? document.querySelector(el) : el;
    // 2.把data中的属性注入到vue实例中，转换成getter和setter
    this._proxyData(this.$data);
    // 3.调用Observer实现数据劫持
    new Observer(this.$data);
    // 4.调用Compiler解析指令/插值表达式等
    new Compiler(this);
  }
  _proxyData(data) {
    Object.keys(data).forEach((key) => {
      // 这里的this是指vue实例，所以直接向其注入转换成getter和setter的属性
      Object.defineProperty(this, key, {
        configurable: true,
        enumerable: true,
        get() {
          return data[key];
        },
        set(newVal) {
          if (newVal === data[key]) return;
          data[key] = newVal;
        },
      });
    });
  }
}

Observer （数据劫持）类

  • 功能

    • 负责把 data 选项中的属性转换成响应式数据
    • data 中的某个属性也是对象，把该属性转换成响应式数据
    • 数据变化发送通知 ----------------？

  • 类图
    在这里插入图片描述
    解释说明：

  1. walk(data)：遍历data的所有属性，会调用defineReactive方法进行数据转换。
  2. defineReactive(data,key,value)：将数据定义为响应式数据，即getter和setter。
  • 代码：

class Observer {
  constructor(data) {
    this.walk(data);
  }
  // 1.遍历data所有属性
  walk(data) {
    // 加强程序健壮性，做对象判断
    if (!data || typeof data !== "object") return;
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }
  // 2.将data转换成响应式数据，即getter和setter
  // 特别说明：该方法中需要传入value而不直接使用data[key]的原因是 会造成循环引用的问题。
  defineReactive(data, key, value) {
    const that = this;
    // ______特别加入：为每一个属性增加Dep对象，负责收集依赖，发送通知。
    const dep = new Dep();
    // 特别情况1：当data的某一属性值也是对象时，也需要将其转换为getter和setter
    this.walk(value);
    Object.defineProperty(data, key, {
      configurable: true,
      enumerable: true,
      get() {
        // ______特别加入：在getter中收集观察者：
        // 判断是否有观察者的方式是在watcher类实例化时，向Dep类上挂载一个target属性，用于存储当前的watcher对象，在这里进行target判断，如果有，就使用dep.addSub()添加观察者。
        Dep.target && dep.addSub(Dep.target);
        return value;
      },
      set(newVal) {
        if (newVal === value) return;
        // 特别情况2：当设置data的某一个新属性值为对象时，也需要将其转换为getter和setter。
        // 由于这是在set方法中，this指向并非vue实例，故需要使用外面的that指向vue实例的对象。
        that.walk(newVal);
        value = newVal;
        // ____特别加入：在setter时，需要通知所有的观察者变化。
        dep.notify();
      },
    });
  }
}

Compiler（编译器）类

  • 功能：（操作dom）
    • 负责编译模板，解析指令/插值表达式
    • 负责页面的首次渲染
    • 当数据变化后重新渲染视图

注意：这里没有使用虚拟dom，直接操作的dom。

  • 类图：

在这里插入图片描述

解释说明：

  1. el：传入的dom对象，后面需要渲染dom使用
  2. vm: vue实例，后面需要vm中的数据
  3. compiler(el)：遍历el这个dom对象的所有节点，不同的节点调用解析文本节点或者元素节点的方法
  4. compileElement(node)：解析元素节点，即解析元素中的指令
  5. compileText(node):解析文本节点，即解析差值表达式
  6. isDirective(attrName)：判断元素节点上的属性 是否是 vue指令
  7. isTextNode(node)：判断是否是文本节点
  8. isElementNode(node)：判断是否是元素节点
  • 代码：

class Compiler {
  constructor(vm) {
    // 方便后面使用，将vm与el存储
    this.vm = vm;
    this.el = vm.$el;
    // 编译模板
    this.compiler(this.el);
  }
  // 1.遍历所有el中的节点
  compiler(el) {
    // 注意：这里使用childNodes可以获取所有子节点，而children只能获取所有子元素。这里只获取一层的子节点。
    const nodes = el.childNodes;
    // nodes是伪数组，需要转换成数组
    Array.from(nodes).forEach((node) => {
      if (this.isElementNode(node)) {
        this.compileElement(node);
      } else if (this.isTextNode(node)) {
        this.compileText(node);
      }
      // 当子节点中还有其子节点时，需要递归调用
      if (node.childNodes && node.childNodes.length) {
        this.compiler(node);
      }
    });
  }

  // 1-1 判断是否文本节点
  isTextNode(node) {
    return node.nodeType === 3;
  }

  // 1-2 判断是否元素节点
  isElementNode(node) {
    return node.nodeType === 1;
  }

  // 1-3 解析差值表达式
  compileText(node) {
    // 正则匹配 差值表达式
    const reg = /\{\{(.+?)\}\}/;
    // node.textContent和node.nodeValue都是当前节点的内容
    const content = node.textContent;
    if (reg.test(content)) {
      // 使用$1可获取正则表达式中小括号中的值
      const value = RegExp.$1.trim();
      // 差值表达式去掉双括号后，就是变量的名字，由于变量已经都在observer.js中挂载到了vm实例中，故这里取值
      node.textContent = content.replace(reg, this.vm[value]);
      // ____数据响应添加：实例化Watcher对象
      new Watcher(this.vm, value, (newValue) => {
        node.textContent = newValue;
      });
    }
  }

  // 1-4 解析指令
  // 首次渲染——只渲染v-text和v-model
  compileElement(node) {
    const attributes = node.attributes;
    Array.from(attributes).forEach((attr) => {
      let attrName = attr.name;
      if (this.isDirective(attrName)) {
        // 根据不同的指令进行不同的渲染
        // 不采取if语句，使用字符串拼接方法名的方式，便于扩展更多的指令处理方法
        attrName = attrName.substr(2); //从索引2开始截取到最后，获取到v-text指令名去除v-后的字符串。
        // 获取该属性的属性值
        const key = attr.value;
        // 解析不同的指令
        this.update(node, key, attrName);
      }
    });
  }
  // 1-1-1 判断是否vue指令
  isDirective(attrName) {
    return attrName.startsWith("v-");
  }
  // 负责更新Dom，update相当于一个watcher，统一执行不同指令解析的位置
  update(node, key, attrName) {
    const updaterFn = this[attrName + "Updater"];
    updaterFn && updaterFn.call(this, node, this.vm[key], key);
  }
  // v-text解析方法
  textUpdater(node, value, key) {
    node.textContent = value;
    // ____数据响应添加：实例化Watcher对象
    new Watcher(this.vm, key, (newValue) => {
      node.textContent = newValue;
    });
  }
  // v-model解析方法
  modelUpdater(node, value, key) {
    node.value = value;
    // ____数据响应添加：实例化Watcher对象
    new Watcher(this.vm, key, (newValue) => {
      node.value = newValue;
    });
    // ____为了实现双向绑定，页面输入的变化，同步到数据，需要定义input方法
    node.addEventListener("input", () => {
      this.vm[key] = node.value;
    });
  }
}

Dep（发布者）类

在这里插入图片描述

  • 功能：

    • 收集依赖，添加观察者（watcher）
    • 通知所有观察者

  • 类图：

在这里插入图片描述
解释说明：

  • subs：用来存储所有观察者的数组属性

  • addSub(sub)：添加观察者的方法

  • notify()：通知所有观察者的方法

  • 代码：


class Dep {
  constructor() {
    // 1.初始化subs存储所有观察者的数组
    this.subs = [];
  }
  // 2.添加观察者
  addSub(sub) {
    //判断是否有传递观察者，且约定观察者必须有update方法，方便在被通知后，调用update方法
    if (sub && sub.update) {
      this.subs.push(sub);
    }
  }
  // 3.发送通知给所有观察者
  notify() {
    this.subs.forEach((sub) => {
      sub.update();
    });
  }
}

Watcher（观察者）类

在这里插入图片描述

  • 功能：

    • 当数据变化就触发依赖，dep通知所有的watcher实时更新视图
    • 自身实例化的时候往dep对象中添加自己。

  • 类图：

在这里插入图片描述
解释说明：

update()：方法，update中进行更新视图
cb：属性，不同的watcher更新的操作不一样。通过cb交代
vm：属性，通过vue实例获取属性对应的值
key：属性，当前观察的属性名称
oldValue：属性，存储变化之前的值

  • 代码：

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
		this.key = key;
		// 回调函数负责更新视图
    this.cb = cb;
    // 1.实例化时，要把自己加入Dep类中，
    // 1.1 先将自己存储在target静态属性中
    Dep.target = this;
    // 1.2 再通过取值操作，触发执行属性的getter，在observer.js文件中，属性的getter方法中会通过判断Dep.target属性来进行存储当前的watcher实例
    this.oldValue = this.vm[key];
    // 1.3 为了避免重复添加，每一次判断后，需要将Dep的target属性置空。
    Dep.target = null;
	}
	// 2.更新视图
  update() {
    //此时，vue实例对象中data中的key属性值已经变为最新的了
    let newValue = this.vm[this.key];
    if (newValue === this.oldValue) return;
    this.cb(newValue);
  }
}
Watcher类在Compiler中的实例化

  • 作用：为了实现数据改变=》发送通知=》改变视图，更新视图的时候需要调用update，但在update方法中是通过cb回调函数实现的，所以我们需要实例化Watcher类后，将cb回调函数定义，从而实现该功能。

  • Watcher类实例化的位置：compiler代码中，所有把数据渲染成dom的位置都需要创建一个watcher对象。

  • 代码：（compiler文件中新增的代码）


class Compiler {
  constructor(vm) {
    this.vm = vm;
    this.el = vm.$el;
    this.compiler(this.el);
  }
  compiler(el) {
    const nodes = el.childNodes;
    Array.from(nodes).forEach((node) => {
      if (this.isElementNode(node)) {
        this.compileElement(node);
      } else if (this.isTextNode(node)) {
        this.compileText(node);
      }
      if (node.childNodes && node.childNodes.length) {
        this.compiler(node);
      }
    });
  }

  isTextNode(node) {
    return node.nodeType === 3;
  }

  isElementNode(node) {
    return node.nodeType === 1;
  }

  compileText(node) {
    const reg = /\{\{(.+?)\}\}/;
    const content = node.textContent;
    if (reg.test(content)) {
      const value = RegExp.$1.trim();
      node.textContent = content.replace(reg, this.vm[value]);
      new Watcher(this.vm, value, (newValue) => {
        node.textContent = newValue;
      });
    }
  }

  compileElement(node) {
    const attributes = node.attributes;
    Array.from(attributes).forEach((attr) => {
      let attrName = attr.name;
      if (this.isDirective(attrName)) {
        attrName = attrName.substr(2); 
        const key = attr.value;
        this.update(node, key, attrName);
      }
    });
  }
  
  isDirective(attrName) {
    return attrName.startsWith("v-");
  }
 
  update(node, key, attrName) {
    const updaterFn = this[attrName + "Updater"];
    updaterFn && updaterFn.call(this, node, this.vm[key], key);
  }

  textUpdater(node, value, key) {
    node.textContent = value;
    // ____数据响应添加：实例化Watcher对象
    new Watcher(this.vm, key, (newValue) => {
      node.textContent = newValue;
    });
  }
  modelUpdater(node, value, key) {
    node.value = value;
    // ____数据响应添加：实例化Watcher对象
    new Watcher(this.vm, key, (newValue) => {
      node.value = newValue;
    });
    // ____为了实现双向绑定，页面输入的变化，同步到数据，需要定义input方法
    node.addEventListener("input", () => {
      this.vm[key] = node.value;
    });
  }
}

特别说明：

  1. 在写Dep类和Watcher类的时候，需要随之修改两个文件中的类
  • 一是observer.js中的Observer类（因为在这个类中为data中的每一个属性转换为getter和setter形式）

原因是：考虑到需要为每一个data对象中的属性添加一个Dep实例，在getter方法中添加观察者（这里也会涉及辅助Watcher类中实例的存储），在setter方法中通知所有观察者做修改。

  • 二是compiler.js中的Compiler类 （因为在这个类中主要做dom操作，数据的双向绑定都需要在这里进行修改）

原因是：Watcher类的实例化位置需要在Compiler类中，因为需要实现数据的变化。

整体流程

在这里插入图片描述
当页面首次加载的时候，是通过Compiler更新视图；
当页面数据变化的时候，是通过Watcher更新视图。

晓萌的百宝袋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 响应式原理【1】
weixin_37883657的博客
12-22 114
数据驱动 数据响应式、双向绑定、数据驱动 数据响应式 数据模型基金是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM操作，提高开发效率。 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动是 Vue 独特的特性之一 开发过程中仅需要关注数据本身，不需要关心数据是如何轩然大波视图 数据响应式核心原理-Vue2 Vue 2.x vue 2.x深入响...
vue.js响应式原理解析与实现
weixin_34176694的博客
10-26 169
vue.js响应式原理解析与实现。angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。vue.js响应式原理解析与实现 Object.defineProperty es5新增了Object.defineProperty这个api，它可以允许我们为对象的属性来设定getter和setter,从而...
Vue.js 响应式原理
weixin_47124862的博客
08-21 457
Vue.js 响应式原理 准备工作 数据驱动 在学习 Vue.js 的过程中，我们经常看到三个概念： 数据驱动 数据响应式 双向数据绑定 响应式的核心原理 核心原理分析 Vue 2.x 版本与 Vue 3.x 版本的响应式实现有所不同，我们将分别讲解。 Vue 2.x 响应式基于 ES5 的 Object.defineProperty 实现。 <script> var obj = { name: 'rae', age: '18' }
模拟Vue响应式原理
m0_59785331的博客
07-16 245
模拟Vue响应式原理
interview-meituanWeb-vue:仿美团PC端——vue
03-09
【标题】"interview-meituanWeb-vue:仿美团PC端——vue"是一个基于Vue.js框架实现的项目，旨在模拟构建美团网的PC端网页。这个项目可以帮助开发者熟悉Vue.js的基本用法以及如何将其应用于实际的前端开发场景中。 ...
mall-vue-app(1).zip
05-19
本篇文章将围绕“小米商城”这个项目，深度解析基于Vue.js构建的前端应用——mall-vue-app(1)。 首先，我们要了解Vue.js的核心特性。Vue采用MVVM（Model-View-ViewModel）架构模式，使得数据和视图之间的绑定变得...
vuetasknode是一个基于Vue的任务节点图绘制插件
08-10
### 动态更新与响应式 `Vue-task-node` 支持数据的动态更新，这意味着你可以根据用户的操作或后端数据的变化，实时调整任务图的状态。通过监听`@update`事件，你可以获取到当前的图表数据，方便与其他组件或服务...
Vue实现开心消消乐游戏算法
10-16
通过Vue.js，我们可以创建一个基本的开心消消乐游戏框架，利用Vue的响应式系统和指令系统实现游戏界面的动态更新。结合消除和下落的核心算法，可以模拟游戏的基本逻辑。当然，实际的游戏开发可能还需要考虑更多细节...
vue初学者资料基础篇和项目学习
03-19
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue的基础教学和项目实践是学习过程中至关重要的部分，对于初学者来说，掌握这些内容能帮助快速上手并深入理解Vue的核心...
用原生JS搞懂VUE的响应式原理，这篇文章就够了
01-08
在实现之前我们先了解下VUE的响应式是什么； 它是Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 博主网站：www.dzyong.top 微信公众号：《前端筱园》 原理是什么 VUE中实现响应式运用到了JavaScript中object的一个很重要的属性Object.defineProperty。Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 VUE会将一个普通的JavaScript对象传入VUE实例中作为data选项，da
模拟 Vue.js响应式原理
shenzhenya的博客
12-02 225
模拟 Vue.js响应式原理
Vue.js 中的响应式原理是什么？
u013749113的博客
06-05 1248
在Vue.js中，响应式是指当数据发生变化时，相关的视图将自动更新。这种自动更新是通过Vue.js内部的响应式系统实现的。响应式系统是Vue.js的核心组成部分之一，它的工作原理是将数据对象转换为响应式对象。响应式对象是一个包装了原始对象的代理对象，当我们访问响应式对象的属性时，实际上是访问了原始对象的属性。但是，当我们修改响应式对象的属性时，Vue.js会自动检测到这个变化，并通知相关的视图进行更新。Vue.js的响应式原理是通过将数据对象转换为响应式对象，利用ES6中的Proxy对象实现的。
最简单的代码实现Vue响应式原理
weixin_40643543的博客
05-07 628
Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件。 var data = { name: 'yck' } observe(data) let name = data.name // -> get value data.name = 'yyy' // -> change value function...
重要的vue响应式原理（数据双向绑定）
weixin_49343253的博客
06-20 531
vue响应式的实现主要是通过数据拦截（拦截数据的set和get）以及发布者订阅者模式。主要有observer,dep,watcher这几个模块。 observer主要是进行
Vue源码阅读之12依赖类Dep
jifukui的专栏
07-31 597
之前的章节讲解完了Vue从BeforeCreated到mount的过程，这里我们对Vue的事件的监听进行处理，首先这里介绍的是依赖类Dep。 数据成员 （1）静态的监视器对象target。 （2）数值类型的Dep对象的编号的id。 （3）数组类型的监视器数组subs。 成员函数 （1）构造函数：设置Dep对象的id号，并更新全局的iD号，以及初始化subs的数组的值为空。 （2）addSub方法:向Dep实例中的subs数组中添加监视器对象。 （3）removeSub方法：删除Dep实例中s
vue2调试源码
最新发布
我的博客简介
11-23 807
数据劫持 + 发布者-订阅者模式，递归Observer data数据，其实用Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调，Compile编译模板时，新增Watcher依赖，并触发相关属性的getter方法收集依赖，当我们让属性发生变化时，会notify发布消息给订阅者，触发依赖数据更新。很多时候会用到别名，想快速找到该文件可以复制路径和上面的方法一样 也可以找到。输入文件名字 就可以找到该文件。.........
带你了解响应式原理，以及Vue 响应式原理模拟实现
qq_32090185的博客
08-10 4645
Study Notes 深入响应式原理 数据响应式、双向绑定、数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动是 Vue 最独特的特性之一 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图 Vue2.x 响应式原理 当你把一个普通的 JavaScript
Fullstack Vue 3 The Complete Guide to Vue.js
02-23
"这是一本全面介绍Vue.js的前端开发指南——《Fullstack Vue 3：Vue.js及其周边技术完全指南》。本书由Hassan Djirdeh、Nate Murray和Ari Lerner共同撰写，针对Vue.js的最新3.x版本进行了详细讲解。" 在全栈Vue开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值