详解VUE响应式原理

2024-09-28 05:13:07

1、响应式原理基础

响应式基本原理是基于Object.defineProperty(obj, prop, descriptor), descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）。

扩展：上面是vue2.0的响应式基本原理，vue3.0的基本原理是Proxy，可以监听属性的get和set方法，监听属性的添加和删除等等，比Object.defineProperty能力更强，但是不兼容IE11。

2、核心对象：Dep与Watcher

Dep: vue在data里申明的每一个属性都会生成一个Dep的实例对象，Dep.subs存储着当该属性变化时需要去更新的Watcher;

Watcher: 有3种情况会生成Watcher的实例对象，分别为：

1.定义在computed里的计算属性；

2.在watch里写的监听函数；

3.组件的渲染Watcher；

3、收集依赖与更新依赖

3.1 收集依赖

将Watcher的实例对象w分发到它所依赖的属性的Dep中，过程如下：

1.将Dep.target = 当前的Watcer 的实例对象w；

2.w执行定义的函数（即在computed/watch写的函数）；

3.执行函数的过程如果使用data里定义的属性，则会触发属性的get方法，get方法中Dep实例对象dep会将Dep.target中存储的w放入到dep.subs数组中，完成依赖收集。

说明：Dep.target为当前Watcer的实例对象

3.2 更新依赖

当修改我们申明的某个属性时，会触发属性的set方法，set方法会将dep.subs数组中收集的Watcher实例对象进行更新，即触发我们定义在computed和watch里面的函数。

4、源码调试

4.1 测试的页面代码

<template>
  <div>
    <div>a:<input v-model="a" /></div>
    <div>c:{{ c }}</div>
    <div>b:<input v-model="b" /></div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      a: '',
      b: ''
    }
  },
  computed: {
    c() {
      return 'source from ' + this.a;
    }
  },
  watch: {
    b() {
      console.log('b changed');
    }
  }
};
</script>

上面的代码vue初始化后会生成如下几个对象：

1、对象说明

属性a和b对应的Dep实例对象（收集a、b改变需要更新的Watcher）：depA、depB;

页面渲染函数生成对应的Watcher实例对象updateWatcher；

computed属性c生成对应的Watcher实例对象：watcherC;

watch监听属性b生成对应的Watcher实例对象：watcherB;

2、Dep与Watcher的关系

a、b变化页面需要重新渲染，所以updateWatcher存在于depA和depB的subs中;

计算属性c依赖属性a的变化更更新，所以watcherC存在于depA的subs中;

b的变化会触发定义watch 里b的监听函数，所以watcherB存在于depB的subs中；

3、最终的关系结果

最终属性a收集的依赖 depA.subs = [ updateWatcher, watcherC];

最终属性b收集的依赖 depB.subs = [ updateWatcher, watcherB];

4.2 源码调试

找到源码文件：node_modules\vue\dist\vue.runtime.esm.js;

主要涉及如下几个函数：

1、收集依赖的入口函数：initState（页面初始化时执行);

初始化顺序是先data-->computed-->watch：原因是computed依赖data, watch依赖data和watch，被依赖的需要先初始化。

2、初始化computed和watch时，生成Watcher实例化对象

先执行Watcher.get函数，将Dep.target = 当前Watcher实例化对象

触发收集依赖

执行计算属性里面的函数，如果访问到data中的某个属性时，会触发data属性的get方法，触发依赖收集：

当修改这个属性时会触发set方法，会触发更新dep.subs里面watcher对象

最终触发Watcher的更新函数，将待更新的watcher放入队列中：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

Vue模拟响应式原理底层代码实现的示例

目录 1.Vue.js功能: 2.Observer.js功能(数据劫持): 3.Compiler.js功能: 4.Dep.js功能: 5.Watcher.js功能: 整体分析Vue的基本结构如下图所示:(备注:完整代码github地址https://github.com/1512955040/MiniVue) 上图中,为我们模拟最小vue的整体结构,首先创建一个vue类型,它负责把data中的成员注入到vue实例中,并且转化成getter/setter,observer的作用是数据劫持,对dat
详细分析vue响应式原理

前言响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程将流程拆分,理解其中的作用结合以上的点,理解整体流程文章稍长,但大部分是代码实现,还请耐心观看.为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习. 主要成员响应式原理中,Observe.Watcher.Dep这三个类是构成完整原理的主要成员. Observe,响
vue2.0/3.0的响应式原理及区别浅析

前言自从vue3.0正式上线以来,好多小伙伴都转战vue3.0了,这里把我自己总结的3.0和2.0的原理以及他俩的区别写出来,方便自己学习. step 一,vue2.0的响应式原理先看看官网的解释: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性
详解Vue3的响应式原理解析

目录 Vue2响应式原理回顾 Vue3响应式原理剖析嵌套对象响应式避免重复代理总结 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const originalProto = Array.prototype const arrayProto = Object.create(originalProto) ;['push', 'pop', 'shift', 'unshift', 'splic
vue响应式原理与双向数据的深入解析

了解object.defineProperty 实现响应式清楚 observe/watcher/dep 具体指的是什么了解发布订阅模式以及其解决的具体问题在Javascript里实现数据响应式一般有俩种方案,分别对应着vue2.x 和 vue3.x使用的方式,他们分别是: 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 提示:以下是本篇文章正文内容,下面案例可供参考 vue-响应式是什么? Vue 最独特的特性之一
详解实现vue的数据响应式原理

这篇文章主要是给不了解或者没接触过 vue 响应式源码的小伙伴们看的,其主要目的在于能对 vue 的响应式原理有个基本的认识和了解,如果在面试中被问到此类问题,能够知道面试官想让你回答的是什么?「PS:文中如有不对的地方,欢迎小伙伴们指正」响应式的理解响应式顾名思义就是数据变化,会引起视图的更新.这篇文章主要分析 vue2.0 中对象和数组响应式原理的实现,依赖收集和视图更新我们留在下一篇文章分析. 在 vue 中,我们所说的响应式数据,一般指的是数组类型和对象类型的数据.vue 内部通过
Vue解读之响应式原理源码剖析

目录初始化 initState() initProps() initData() observe() Observer defineReactive() 依赖收集 Dep Watcher 依赖收集过程移除订阅派发更新 notify() update() queueWatcher() flushSchedulerQueue() updated() defineProperty 缺陷及处理 Vue.set() 重写数组方法总结先看张图,了解一下大体流程和要做的事初始化在 new Vue
详解VUE响应式原理

目录 1.响应式原理基础 2.核心对象:Dep与Watcher 3.收集依赖与更新依赖 3.1 收集依赖 3.2 更新依赖 4.源码调试 4.1 测试的页面代码 1.对象说明 2.Dep与Watcher的关系 3.最终的关系结果 4.2 源码调试 1.收集依赖的入口函数:initState(页面初始化时执行); 2.初始化computed和watch时,生成Watcher实例化对象总结 1.响应式原理基础响应式基本原理是基于Object.defineProperty(obj, prop,
一文详解Vue3响应式原理

目录回顾 vue2.x 的响应式 vue3的响应式 Reflect 回顾 vue2.x 的响应式实现原理: 对象类型:通过object.defineProperty()对属性的读取.修改进行拦截(数据劫持) 数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹) Object.defineProperty(data,'count ",{ get(){}, set(){} }) 存在问题: 新增属性.删除属性,界面不会更新直接通过下标修改数组,界面不会自动更新但是
代码详解Vuejs响应式原理

响应式原理 > vuejs中的模型(model)和视图(view)是保持同步的,在修改数据的时候会自动更新视图,这其实依赖于Object.defineProperty方法,所以vuejs不支持IE8及以下版本,vuejs通过劫持getter/setter方法来监听数据的变化,通过getter进行依赖收集,在数据变更执行setter的时候通知视图更新. Object.defineProperty > Object.defineProperty可以定义对象的属性或修改对象的属性 > 目前可以
Vue响应式原理的示例详解

Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v
Vue响应式原理Observer、Dep、Watcher理解

开篇最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的.自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果
一篇文章带你彻底搞懂VUE响应式原理

目录响应式原理图编译创建compile类操作fragment 获取元素节点上的信息获取文本节点信息操作fragment 响应式数据劫持收集依赖响应式代码完善 Dep类全局watcher用完清空依赖的update方法需要注意的一个地方双剑合璧总结首先上图,下面这张图,即为MVVM响应式原理的整个过程图,我们本篇都是围绕着这张图进行分析,所以这张图是重中之重. 响应式原理图一脸懵逼?没关系,接下来我们将通过创建一个简单的MVVM响应系统来一步步了解这个上图中的全过程.
Vue响应式原理及双向数据绑定示例分析

目录前言响应式原理双向数据绑定前言之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别. 响应式原理是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~ Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助
Vue响应式原理模拟实现原理探究

目录前置知识数据驱动数据响应式的核心原理 Vue 2.x Vue 3.x 发布订阅和观察者模式发布/订阅模式观察者模式 Vue响应式原理模拟实现 Vue Observer对data中的属性进行监听 Compiler Watcher Dep 测试代码前置知识数据驱动数据响应式——Vue 最标志性的功能就是其低侵入性的响应式系统.组件状态都是由响应式的 JavaScript 对象组成的.当更改它们时,视图会随即自动更新. 双向绑定——数据改变,视图改变:视图改变,数据也随之改变数据