您的当前位置:首页Vue数据响应式原理分析

Vue数据响应式原理分析

2023-11-30 来源:华拓教育
这次给大家带来Vue数据响应式原理分析,Vue数据响应式的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程。

本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray()。

改造数据

我们先来尝试写一个函数,用于改造对象:

为什么要先写这个函数呢? 因为改造数据是一个最基础也是最重要的步骤,之后所有的步骤都会依赖这一步。

// 代码 1.1function defineReactive (obj,key,val) { Object.defineProperty(obj,key,{ enumerable: true, configurable: true, get: function () { return val; }, set: function (newVal) { //判断新值与旧值是否相等 //判断的后半段是为了验证新值与旧值都为NaN的情况 NaN不等于自身 if(newVal === val || (newVal !== newVal && value !== value)){ return ; } val = newVal; } });}

例如const obj = {},然后再调用defineReactive(obj,'a',2)方法,此时在函数内,val=2,然后每次获取obj.a的值的时候都是获取val的值,设置obj.a的时候也是设置val的值。(每次调用defineReactive都会产生一个闭包保存了val的值);

流程讨论

经过验证之后,发现这个函数确实可以使用的。然后我们来讨论一下响应的流程:

  1. 输入数据

  2. 改造数据(defineReactive())

  3. 如果数据变动 => 触发事件

我们来看第三步,数据变动如何触发之后的事件呢?仔细思考一下,如果要改变数据,那么必须先set数据,那么我们直接set()里面添加方法就ok了呀。

然后还有一个重要问题:

依赖收集

我们怎么知道数据改变之后要触发的是什么事件呢?在Vue中:

使用数据 => 视图; 使用了数据来渲染视图,那么在获取数据的时候收集依赖是最佳的时机,Vue在改造数据属性的时候生成一个Dep实例,用于收集依赖。

// 代码 1.2class Dep { constructor(){ //订阅的信息 this.subs = []; } addSub(sub){ this.subs.push(sub); } removeSub (sub) { remove(this.subs, sub); } //此方法的作用等同于 this.subs.push(Watcher); depend(){ if (Dep.target) { Dep.target.addDep(this); } } //这个方法就是发布通知了 告诉你 有改变啦 notify(){ const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update(); } }}Dep.target = null;

代码1.2就是Dep的部分代码,暂时只需要知道2个方法的作用就可以了

  1. depend() --- 可以理解为收集依赖的事件,不考虑其他方面的话 功能等同于addSub()

  2. notify() --- 这个方法更为直观了,执行所有依赖的update()方法。就是之后的改变视图啊 等等。

本篇主要讨论数据响应的过程,不深入讨论 Watcher类,所以Dep中的方法知道作用就可以了。

然后就是改变代码1.1了

//代码 1.3function defineReactive (obj,key,val) { const dep = new Dep(); Object.defineProperty(obj,key,{ enumerable: true, configurable: true, get: function () { if(Dep.target){ //收集依赖 等同于 dep.addSub(Dep.target) dep.depend() } return val; }, set: function (newVal) { if(newVal === val || (newVal !== newVal && val !== val)){ return ; } val = newVal; //发布改变 dep.notify(); } });}

这代码中有一个疑点,Dep.target是什么?为什么要有Dep.target才会收集依赖呢?

  1. Dep是一个类,Dep.target是类的属性,并不是dep实例的属性。

  2. Dep类在全局可用,所以Dep.target在全局能访问到,可以任意改变它的值。

  3. get这个方法使用很平常,不可能每次使用获取数据值的时候都去调用dep.depend()。

  4. dep.depend()实际上就是dep.addSub(Dep.target)。

  5. 那么最好方法就是,在使用之前把Dep.target设置成某个对象,在订阅完成之后设置Dep.target = null。

验证

是时候来验证一波代码的可用性了

//代码 1.4const obj = {};//这一句是不是感觉很熟悉 就相当于初始化vue的data ---- data:{obj:{}};//低配的不能再低配的watcher对象(源码中是一个类,我这用一个对象代替了)const watcher = { addDep:function (dep) { dep.addSub(this); }, update:function(){ html(); }}//假装这个是渲染页面的function html () { document.querySelector('body').innerHTML = obj.html;}defineReactive(obj,'html','how are you');//定义响应式的数据Dep.target = watcher;html();//第一次渲染界面Dep.target = null;

此时浏览器上的界面是这样的

然后在下打开了控制台开始调试,输入:

obj.html = 'I am fine thank you'

然后就发现,按下回车的那一瞬间,奇迹发生了,页面变成了

结尾

Vue数据响应的设计模式和订阅发布模式有一点像,但是不同,每一个dep实例就是一个订阅中心,每一次发布都会把所有的订阅全部发布出去。

Vue的响应式原理其实还有很大一部分,本文主要讨论了Vue是如何让数据进行响应,但是实际上,一般的数据都是很多的,一个数据被多处使用,改变数据之后观察新值,如何观察、如何订阅、如何调度,都还有很大一部分没有讨论。主要的三个类Dep(收集依赖)、Observer(观察数据)、Watcher(订阅者,若数据有变化通知订阅者),都只提了一点点。

之前写有一篇Vue响应式----数组变异方法,针对Vue中对数组的改造进行讨论。当然之后有更多其他的文章,整个数据响应流程还有很多内容,三个主要的类都还没有讨论完。

其实阅读源码不仅仅是为了知道源码是如何工作的,更重要的是学习作者的思路与方法,我写的文章都不长,希望自己能够每次专注一个点,能够真真实实领悟到这一个点的原理。当然也想控制阅读时间,免得大家看到一半就关闭了。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

React Form组件封装步骤详解

JS跨域POST实现步骤详解

小编还为您整理了以下内容,可能对您也有帮助:

vue响应式原理是什么?

当一个vue实例加载时,会进行初始化,将他的配置项options和mixins的内容合并,以options为主,而在初始化data时,会对data对象进行数据劫持,并做代理,通过Object。

definproperty劫持数据后vue会查找当前属性有无依赖项既被watch,或者依赖当前属性的值,如果有,就会注册依赖既deps,而注册deps时会在wather内添加新的更新目标。

当数据发生变更时,会触发deps的更新方法,调用所有的watcher,watcher又会触发对应deps的更新,直到所有依赖项更新完毕。

扩展资料:

Vue 是一个 MVVM框架,核心是双向数据绑定,VM(视图模型)是作为V(视图)和M(模型)的桥梁。对Vue响应式(双向数据绑定)的理解,如果错误尽请指出,一起交流,共同进步。Vue响应式原理核心是 数据劫持,采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。

Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。

参考资料来源:百度百科-Vue·js前端开发技术

能说说vue的响应式原理吗?

Vue 是一个 MVVM 框架,核心是双向数据绑定,VM(视图模型)是作为 V(视图) 和 M(模型)的桥梁。下面是对 Vue 响应式(双向数据绑定)的理解,如果错误尽请指出,一起交流,共同进步。

Vue响应式原理核心是 数据劫持,采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。从一个例子出发:

    首先,在Vue初始化阶段,通过 observer 对 data 中的属性进行递归的劫持,包括 name、job_ undergo、a、b等

    在 get阶段也就是初始化视图时,为每一个劫持的属性分配一个 依赖收集器,主要收集当前属性的观察者对象,例子中 name 属性在模板中有两处被使用,那么 name 属性的依赖收集器中就存放两个观察者对象

    当点击按钮时,将 name 修改为 lisi 时,会触发 observer 的 setter 函数,将 value 更新为 lisi 最新值,然后通知依赖收集器数据发生了更新。

    依赖收集就是发布订阅模式,依赖收集器会通知所有的观察者对象,当前name 属性有两个观察者对象。

    观察者对象调用对应的回调函数进行相关的处理和DOM更新

以上是纯响应式原理的分析和总结,下面配一张流程图:

如何理解 vue 的响应式?

Vue 的响应式是指 Vue 能够自动追踪数据的变化,当数据发生变化时,视图会自动更新。这样,我们就不需要手动操作DOM来更新视图了。Vue 的响应式是通过依赖收集和派发更新来实现的。当一个组件渲染到一个DOM节点上时,Vue会遍历这个节点上的所有属性,找出所有依赖这个属性的元素,并将它们添加到一个叫做 Watcher 的类中。当这个属性发生变化时,Watcher 会自动调用组件的 update() 方法来更新视图。

你可以通过以下方式使用 Vue 的响应式:

- 使用 v-model 指令进行双向数据绑定。

- 使用 v-if、v-for、v-show 等指令进行条件渲染。

- 使用 computed 和 watch 计算属性和侦听器。

- 使用 $refs 访问模板中的子组件或元素。

vue的数据驱动原理

Vue.js 的数据驱动原理主要基于一个核心概念:响应式数据绑定。这个原理允许 Vue.js 跟踪组件中的数据变化,并在需要时自动更新视图。

拓展知识:

Vue.js 使用响应式数据绑定来处理数据变化。当你在 Vue 实例中定义一个响应式数据项时,Vue 会创建一个与之关联的依赖追踪对象。每当数据项的值发生变化时,依赖追踪对象就会记录下这个变化,并通知相关的 DOM 更新。这个原理的核心在于 Vue 的响应式系统,它是一个用于追踪数据变化的机制,它会在数据发生变化时触发相应的更新操作。Vue 使用这个机制来检测和响应 DOM 上的数据变化。

Vue 的响应式系统由三个主要部分组成:

依赖追踪:Vue 使用一个依赖追踪对象来跟踪所有响应式数据的变化。每当数据发生变化时,依赖追踪对象就会更新,以确保它知道需要触发哪些更新操作。

getter/setter:Vue 的响应式数据是通过 getter 和 setter 方法实现的。getter 方法在访问数据时被调用,而 setter 方法则会在你尝试更改数据时被调用。通过这些方法,Vue 可以跟踪数据的变化,并确保它们触发了正确的更新操作。

watchers:Vue 提供了 watcher 选项,允许你在特定数据变化时执行自定义操作。Watcher 是 Vue 的响应式系统中的一部分,允许你在数据发生变化时执行自定义逻辑。

为了更好地理解 Vue 的数据驱动原理,我们需要理解 Vue 组件的结构和组件之间的相互作用。Vue 的组件模型是基于可重用的代码片段的,这些代码片段称为组件模板。这些组件模板通过 props 传递数据,并通过 events 接收和处理其他组件发送的事件。这些交互使得 Vue 能够构建复杂的用户界面,并且当数据发生变化时,Vue 能够自动更新视图。

总的来说,Vue 的数据驱动原理是通过响应式数据绑定、getter/setter 和 watcher 来追踪和响应数据的变化,并通过组件间的相互作用来构建复杂的用户界面。这个原理使得 Vue 成为一个强大的前端框架,能够轻松地创建动态、交互式的用户界面。

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。