Vue响应式原理以及实现

已于 2022-06-14 09:01:58 修改
阅读量286 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-06-10 11:21:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenweiqiang77/article/details/125218290
版权

本文产出于学习尤大解析源码的教程之时。

前言

什么是响应式？

  • View(视图) & State(数据)之间的相互响应
    • 视图中的交互事件使得数据改变时（如：input输入/鼠标点入等事件），使得视图发生变化时，State应随着View发生改变
    • State中的值发生变化时，对应涉及的视图也应该重新渲染

我们不妨来手动实现一个简易的响应式。

首先假设我们有个需求，b永远等于a的十倍，如果使用命令式编程，可以很简单实现，可以像下面这样实现，但是当我们把a设置成4时，b还是等于30

let a = 3;
let b = a * 10；
console.log(b) // 30
a = 4
console.log(b) // 30

为了让b等于a的10倍，那我们需要重新设置b的值，像下面代码

let a = 3;
let b = a * 10；
console.log(b) // 30
a = 4;
b = a * 10; // 新增代码
console.log(b) // 40

这解决了我们的需求，但是我们需要在每次给a赋值时，也得手动得让b也跟随着赋值一次。假设我们有一个神奇函数叫onAchange，它接收一个函数并且当a改变时自动被执行，这时候可以对b重新赋值，那上面的问题就解决了，那这个函数如何实现是问题的关键。

onAchange(() => {
  b = a * 10
})

再举个更贴合web开发的例子，下面代码同样有一个神奇函数onStateChange，它会在state改变的时候自动运行，那我们只要在函数中编写dom操作的代码，就可以实现dom的自动更新了

// DOM元素
<span class="cell b1"></span>

// 神奇函数，当state值改变会自动重新运行
onStateChange(() => {
  document.querySelector('.cell.b1').textContent = state.a * 10
})

我们再进一步抽象，把dom的操作使用渲染引擎替换，但是我们不去研究渲染引擎的实现，只是简单的认为它会自动解析模版代码与数据关联即可，那代码就会变成下面这样。

// DOM元素
<span class="cell b1">
	{{ state.a * 10 }}
</span>

// 神奇函数，当state值改变会自动重新运行
onStateChange(() => {
  view = render(state)
})

现在解决问题的核心就是如何实现onStateChange这个方法了，看到下面代码就是它具体的实现，首先定一个外部update变量用于记录调用onStateChanged时传入的函数，如果需要改变state就必须调用setState方法，我们只需要在setState方法内部重新调用之前保存的update方法，即可达成自动更新。

let update;
const onStateChanged = _update => {
  // 把传入的_update函数保存给外部变量
  update = _update;
}

// 用户更新数据必须调用setState函数,函数内把新的state更新并调用update方法
const setState = newState => {
  state = newState;
  update();
}

调用例子，如果你有react开发经验，会发现这和react修改数据调用方法是一样的

onStateChanged(() => {
  view = render(state) // 这里抽象的视图渲染伪代码，可以简单的理解为在更新视图
})

setState({ a: 5 })

而在angular中，我们是不需要调用setState方法来更新数据，可以直接state.a = 5对变量赋值，即可触发视图更新。angular使用脏值检测的方式，拦截你的事件然后判断值是否改变。

onStateChanged(() => {
  view = render(state) // 这里抽象的视图渲染伪代码，可以简单的理解为在更新视图
})

state.a = 5 // 在angualr中，直接赋值即可触发视图更新

但是在Vue中实现方法不太一样，通过Object.defineProperty修改对象属性的getter和setter让对象具有响应性，这种基于依赖跟踪的方式其实就是vue.js、konckout.js等框架实现的原理。

Object.defineProperty

属性的操作

在 JavaScript 中，给对象增加一个属性是非常简单的，直接调用属性并赋值即可。

const obj = {};
obj.name = 'Tom';
console.log(obj);
/**
 * 输出：
 * {name: 'Tom'}
 */

通过这种方式添加的属性，可以随意操作：

  • 可修改
  • 可枚举
  • 可删除

可修改：

  // 可修改
+ obj.name = 'Jim';
+ console.log(obj.name);
  /**
  * 输出：
  * 'Jim'
  */

可枚举：

  // 可枚举
+ for (let key in obj) {
+   console.log(`${key} : ${obj[key]}`);
+ }
  /**
  * 输出：
  * name : Jim
  */

可删除：

  // 可删除
+ delete obj.name;
+ console.log(obj);
  /**
  * 输出：
  * {}
  */

如果想通过 Object.defineProperty 实现上面的功能，可以使用下面的代码：

- obj.name = 'Tom';
+ Object.defineProperty(obj, 'name', {
+   value: 'Tom',
+   writable: true,
+   enumerable: true,
+   configurable: true,
+ });

函数签名

在对 Object.defineProperty 深入学习之前，先对这个方法签名有一个认识：

Object.defineProperty(obj, prop, descriptor);

从函数签名中可以看出，defineProperty 是 Object 上的一个静态方法，可以传递三个参数：

  • obj 要定义属性的对象
  • prop 要定义或修改的属性名称
  • descriptor 要定义或修改属性的描述符

返回值是被传递给函数的对象，也就是第一个参数 obj。

描述符可以有以下几个可选值：

  • configurable
  • enumerable
  • value
  • writable
  • get
  • set

描述符

通过 Object.defineProperty 来为对象定义一个属性。

const obj = {};
Object.defineProperty(obj, 'name', {});
console.log(obj);
/**
 * 输出：
 * {name: undefined}
 */

从输出的结果可以看出，在对象 obj 上增加一个属性 name，但是它的值是 undefined。

value

如果想给属性赋值，可以使用描述符中的 value 属性。

- Object.defineProperty(obj, 'name', {});
+ Object.defineProperty(obj, 'name', {
+   value: 'Tom',
+ });
  /**
  * 输出：
  * {name: 'Tom'}
  */

writable

一般情况下，修改一个对象中的属性值，可以使用 obj.name = 'Jim' 的形式。

+ obj.name = 'Jim';
+ console.log(obj);
  /**
  * 输出：
  * {name: 'Tom'}
  */

从输出结果可以看出，并没有修改成功。如果想修改属性值，可以把描述符中的 writable 设置为 true。

  Object.defineProperty(obj, 'name', {
    value: 'Tom',
+   writable: true,
  });

enumerable

枚举对象的属性，可以使用 for...in。

+ for (let key in obj) {
+   console.log(`${key} : ${obj[key]}`);
+ }

比较奇怪的是，执行上面的代码没有输出任何信息。

如果想正常枚举对象的属性，可以将描述符中的 enumerable 值设置为 true。

  Object.defineProperty(obj, 'name', {
    value: 'Tom',
    writable: true,
+   enumerable: true,
  });

configurable

当这个属性不需要时，可以通过 delete 来删除。

+ delete obj.name;
+ console.log(obj);
  /**
  * 输出：
  * {name: 'Jim'}
  */

从输出结果可以看出，并没有达到预期的效果。如果想从对象上正常删除属性，可以将描述符中的 configurable 设置为 true。

  Object.defineProperty(obj, 'name', {
    value: 'Tom',
    writable: true,
    enumerable: true,
+   configurable: true,
  });

get

如果需要获取对象的值，可以使用描述符中的 get。

const obj = {};
let _tmpName = 'Tom';
Object.defineProperty(obj, 'name', {
  get() {
    return _tmpName;
  },
});
console.log(obj.name);
/**
 * 输出：
 * {name: 'Tom'}
 */

set

如果需要设置对象的值，可以使用描述符中的 set，它需要传递一个参数，就是修改后的值。

  Object.defineProperty(obj, 'name', {
    get() {
      return _tmpName;
    },
+   set(newVal) {
+     _tmpName = newVal;
+   },
  });

+ obj.name = 'Jim';
+ console.log(obj.name);
  /**
  * 输出：
  * {name: 'Jim'}
  */

注意事项

在操作符对象中，如果存在了 value 或 writable 中的任意一个或多个，就不能存在 get 或 set 了。

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 1,
  get() {
    return 2;
  },
});

报错信息如下：

Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

为了方便后期查阅，总结一下互斥的情况：

  • value 和 get 互斥
  • value 和 set 互斥
  • value 和 set + get 互斥
  • writable 和 get 互斥
  • writable 和 set 互斥
  • writable 和 set + get 互斥

使用场景

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。该方法允许精确地添加或修改对象的属性。

这个方法是 JavaScript 的一个比较底层的方法，主要用于在对象上添加或修改对象的属性。

重写getter&setter

我们试着去重写下Object.defineProperty中的get 和set方法，实现一个函数cover，接收一个对象，使对象中的值在赋值和取值的时候都打印其值

example

const obj = { foo: 123 }
convert(obj) 
obj.foo // 需要打印: 'getting key "foo": 123'
obj.foo = 234 // 需要打印: 'setting key "foo" to 234'
obj.foo // 需要打印: 'getting key "foo": 234'

covert

function isObject(obj){
  return typeof obj === 'object' &&
      !Array.isArray(obj) &&
      obj !== undefined &&
      obj !== null
}

function covert(obj){
  if(!isObject(obj)){
      throw new Error('参数不为对象')
  }
  Object.keys(obj).forEach((key)=>{
    let tempValue = obj[key]
    Object.defineProperties(obj,key,{
      get(){
        console.log(`获取属性${key}，值为${tempValue}`);
        return tempValue
      },
      set(newValue){
        tempValue = newValue
        console.log(`设置属性${key}，值为${tempValue}`);
      }
    })
  })
}

显然上面的cover函数达到了我们对重写的需求，但依旧没实现响应式。想一想我们还差什么才能达成响应式？

  1. 在创建属性时设置一个与属性相关的依赖监听
  2. 在赋值属性时调动这个依赖，并在页面上重新渲染

以上的条件我们可抽分为依赖跟踪（订阅发布模式）

依赖跟踪（订阅发布模式）

需要实现一个依赖跟踪类Dep，类里有一个叫depend方法，该方法用于收集依赖项；另外还有一个notify方法，该方法用于触发依赖项的执行，也就是说只要在之前使用dep方法收集的依赖项，当调用notfiy方法时会被触发执行。

下面是Dep类期望达到的效果，调用dep.depend方法收集收集依赖，当调用dep.notify方法，控制台会再次输出updated语句

const dep = new Dep()

autorun(() => {
  dep.depend()
  console.log('updated')
})
// 打印: "updated"

dep.notify()
// 打印: "updated"

autorun函数是接收一个函数，这个函数帮助我们创建一个响应区，当代码放在这个响应区内，就可以通过dep.depend方法注册依赖项

最终实现的Dep类代码如下：

window.Dep = class Dep {
  constructor () {
    // 订阅任务队列，方式有相同的任务，用Set数据结构简单处理
    this.subscribers = new Set()
  }
	// 用于注册依赖项
  depend () {
    if (activeUpdate) {
      this.subscribers.add(activeUpdate)
    }
  }
	// 用于发布消息，触发依赖项重新执行
  notify () {
    this.subscribers.forEach(sub => sub())
  }
}

let activeUpdate = null

function autorun (update) {
  const wrappedUpdate = () => {
    activeUpdate = wrappedUpdate
    update()
    activeUpdate = null
  }
  wrappedUpdate()
}

实现迷你观察者

结合前面的重写getter&setter以及依赖跟踪我们就能得到一个完整的观察者模式了

function isObject (obj) {
    return typeof obj === 'object'
      && !Array.isArray(obj)
      && obj !== null
      && obj !== undefined
}

function observe (obj) {
  if (!isObject(obj)) {
    throw new TypeError()
  }

  Object.keys(obj).forEach(key => {
    let internalValue = obj[key]
    let dep = new Dep()
    Object.defineProperty(obj, key, {
      get () {
        dep.depend()
        return internalValue
      },
      set (newValue) {
        const isChanged = internalValue !== newValue
        if (isChanged) {
          internalValue = newValue
          dep.notify()
        }
      }
    })
  })
}

window.Dep = class Dep {
  constructor () {
    this.subscribers = new Set()
  }

  depend () {
    if (activeUpdate) {
      // register the current active update as a subscriber
      this.subscribers.add(activeUpdate)
    }
  }

  notify () {
    // run all subscriber functions
    this.subscribers.forEach(subscriber => subscriber())
  }
}

let activeUpdate

function autorun (update) {
  function wrappedUpdate () {
    activeUpdate = wrappedUpdate
    update()
    activeUpdate = null
  }
  wrappedUpdate()
}

总结

Vue中的响应式是通过重写Object.defineProperty中的set和get方法。在get中注入依赖，set中提醒依赖更新。

shinshinshintaro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 响应式实现原理深入浅出
小王的技术库
09-30 2370
vue 是一个易上手的框架，许多便捷功能都在其内部做了集成，其中最有区别性的功能就是其潜藏于底层的响应式系统。组件状态都是响应式的 JavaScript 对象。当更改它们时，视图会随即更新，这让状态管理更加简单直观。那么，Vue 响应性系统是如何实现的呢？本文也是在阅读了 Vue 源码后的理解以及模仿实现，所以跟随作者的思路，我们一起由浅入深的探索一下vue吧！本文 Vue 源码版本：2.6.14，为了便于理解，代码都最简化。方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Vue响应式实现原理
踩坑之路
05-06 653
Vue响应式原理 （1）前言响应式原理收集依赖Vue感知数据变动的方式新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导...
Vue 进阶系列（一）之响应式原理及实现
weixin_33910137的博客
10-23 138
Vue进阶系列汇总如下，欢迎阅读。 Vue 进阶系列（一）之响应式原理及实现 Vue 进阶系列（二）之插件原理及实现 Vue 进阶系列（三）之Render函数原理及实现 什么是响应式Reactivity Reactivity表示一个状态改变之后，如何动态改变整个系统，在实际项目应用场景中即数据如何动态改变Dom。 需求 现在有一个需求，有a和b两个变量，要求b一直是a的10倍，怎么做？ 简单尝试1...
vue的响应式原理是怎样实现的？
weixin_45355998的博客
07-23 268
Vue 的异步更新机制的核心是利用了浏览器的异步任务队列来实现的，首选微任务队列，宏任务队列次之。 当响应式数据更新后，会调用 dep.notify 方法，通知 dep 中收集的 watcher 去执行 update 方法，watcher.update 将 watcher 自己放入一个 watcher 队列（全局的 queue 数组）。 然后通过 nextTick 方法将一个刷新 watcher 队列的方法（flushSchedulerQueue）放入一个全局的 callbacks 数组中。 如果此时浏览器
vue响应式原理的实现
邱先生的博客
04-20 819
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档 引言 Vue的数据双向绑定，响应式原理，其实就是通过Object.defineProperty()结合发布者订阅者模式来实现的。 Observer 通过O...
Vue响应式的部分实现
Web_boom的博客
01-28 128
简单来说当数据发生变化时，对数据有依赖的代码会重新执行。例如在Vue中，当我们的数据发生改变，界面上对该数据的引用组件会重新渲染组件data的数据一旦变化，立即出发视图的更新；computed属性在依赖发生变化时，自动重新计算新值；提供watch监听器，可以监听到数据的变化最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue实现双向绑定的原理以及响应式数据的方法
12-12
在Vue中，数据的响应式处理主要通过对象和数组的变异方法来实现。下面我们将详细讨论Vue如何实现双向绑定和响应式数据。 首先，我们来看对象的响应式实现。Vue在初始化时，通过`Object.defineProperty()`这个ES5...
详细分析vue响应式原理
10-15
Vue响应式原理是Vue.js框架中的核心概念之一，它主要实现了数据驱动视图更新的机制。在Vue中，这一原理主要是通过数据劫持（data劫持）的方式完成的，通过定义一个对象的属性为响应式，当属性值变化时，视图会自动...
Vue响应式原理详解
08-30
下面我们将详细探讨Vue响应式原理的各个方面。 首先，Vue通过`Object.defineProperty`方法实现了数据响应化。当你将一个普通的JavaScript对象传递给Vue实例的`data`选项时，Vue会遍历这个对象的所有属性，并用`...
个人博客前端项目，使用Vue3+Vite开发, 兼容移动端（响应式）.rar
最新发布
04-29
# 个人博客前端项目，使用Vue3+Vite开发, 兼容移动端（响应式） ### 具有轻量美观流畅等特点 ### 代码中封装了很多组件和动画 ### 目前还未完全开发完毕，正在努力迭代更新中 ## 所使用的依赖包介绍 + 打包工具： `vite` + md文档解析： `@kangc/v-md-editor` + 代码语法高亮： `prismjs` + 瀑布流：`wc-waterfall` + css预处理: `sass` + 触摸手势： `hammerjs` + 日期：`dayjs` + icon: `bootstrap-icons` + 懒加载：`vue-lazyload` + 加/解密：`crypto-js` + 混淆：`md5` ## 封装的功能 + 元素平滑上升： `utils/vSlidIn.js` + 页面滚动动画： `utils/scrollAnimation.js` + localStorage封装： `utils/storage.js` + 回到顶部组件：`components/BackToTop` + markdown解析组件：`components/Markd
vueweb端响应式布局_vue响应式原理图文详解
weixin_39678451的博客
12-31 419
Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通JS对象，修改它则更新视图(view)。这会让状态管理变得非常简单且直观，不过理解它的工作原理以避免一些常见的问题也是很重要的。本文将详细介绍Vue响应式系统的底层细节。追踪变化把一个普通JS对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.def...
vue中响应式实现原理
weixin_43650802的博客
08-06 283
vue中响应式实现原理 所谓响应式布局，主要做的就是两件事： 如何监听属性发生改变 当得知属性发生改变时，如何通知所有使用该属性的页面发生改变 当我们使用vue框架开发我们的前端页面时，我们最常做的两步就是绑定元素和定义属性` const el = new Vue{ el:'#app', data:{ message:"hello", } } 如上图所示样式，仅仅简单的几句，但是在编码的过程中，你是否考虑过如何实现响应式原理的呢？下面我们
Vue响应式原理和简单实现
Ybbb的博客
02-29 305
Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter从而监听数据，当数据变化时通知视图更新。
Vue响应式原理及实现
yuan
05-21 459
一、核心原理 1. 页面展示 下载 vue.js 模块 响应式基础结构： <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Vue 基础结构</title> </head> <body> <div id="app"> <h1>差值表达式</h1> &lt...
vue响应式的简易实现（超详细注释说明）
前端知识总结
01-06 295
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：vue响应式的简易实现(对比2.x源码) 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、vue解析流程认识 二、核心实现 1.引入库 2.读入数据 总结 前言 简易的实现只实现了v-model，@click事件，与插值表达式{{}}，解析部分未使用虚拟dom用的是真实dom，如果没有你想看的实现部分可斟酌浏览。 通过解析文..
手动实现Vue的响应式原理，并详解Vue2和Vue3响应式实现的区别
m0_59802463的博客
07-14 150
从0到1。一步一步的带着你实现Vue的响应式原理，看懂这篇文章，Vue2和Vue3实现响应式有什么区别，你闭着眼睛都能写出来
简版vue响应式实现
wang_kai_7的博客
04-15 942
前言 此为自己学习vue源码响应式部分的一个小demo，按照自己的理解实现改变变量a,变量b也跟着改变的效果，整体实现较为简单，不考虑任何复杂场景，如有问题请大家指正 效果 data.age改变后，comouted.computedB的值也改变了 node index.js // hello, computedb is 22 // hello, computedb is 59 代码 可以直接复制到浏览器控制台运行 // 发布者 class Observer { constructor() {
【前端词典】 Vue 响应式原理其实很好懂
weixin_34000916的博客
06-06 132
前言 这是十篇 Vue 系列文章的第三篇，这篇文章我们讲讲 Vue 最核心的功能之一 —— 响应式原理。 如何理解响应式 可以这样理解：当一个状态改变之后，与这个状态相关的事务也立即随之改变，从前端来看就是数据状态改变后相关 DOM 也随之改变。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 抛个问题 我们先看看我们在 Vue 中常见的写法： <div ...
Vue响应式原理：Observer与Dep实现
Vue响应式原理主要涉及数据绑定和视图更新，确保当数据变化时，视图能够自动更新以反映这些变化。以下是对该主题的详细说明： 1. **数据绑定**：Vue中的数据绑定基于MVVM（Model-View-ViewModel）模式，它通过双向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值