Vue响应式原理
1|0Vue响应式原理
2|01、课程目标
模拟一个最小版本的Vue
响应式原理在面试的常问问题
实际项目中出现问题的原理层面的解决
给Vue
实例新增一个成员是否是响应式的?
给属性重新赋值成对象,是否是响应式的?
为学习Vue
源码做铺垫。
3|02、数据驱动
在实现整个Vue
响应式代码之前,我们先来了解几个概念。
第一个:数据驱动
第二个:响应式的核心原理
第三个:发布订阅模式和观察这模式
我们先来看一下数据驱动的内容:
数据响应式,双向绑定,数据驱动(我们经常看到这几个词)
数据响应式:数据模型仅仅是普通的JavaScript
对象,而当我们修改数据时,视图会进行更新,避免了频繁的DOM
操作,提高开发效率,这与Jquery
不一样,Jquery
是频繁的操作Dom
双向绑定:
数据改变,视图改变,视图改变,数据也随之改变( 通过这句话,我们可以看到在双向绑定中是包含了数据响应式的内容)
我们可以使用v-model
在表单元素上创建双向数据绑定
数据驱动是Vue
最独特的特性之一
开发过程中仅仅需要关注数据本身,不需要关心数据是如何渲染到视图中的。主流的MVVM
框架都已经实现了数据响应式与双向绑定,所以可以将数据绑定到DOM
上。
4|03、响应式的核心原理
4|13.1 Vue2.x响应式原理
关于Vue2.x
的响应式原理在官方文档中也有介绍。
https://cn.vuejs.org/v2/guide/reactivity.html
在该文档中,我们注意如下一段内容:
通过以上的文字,我们可以看到,在Vue2.x
中响应式的实现是通过Object.defineProperty
来完成的,注意该属性无法降级(shim)处理,所以Vue
不支持IE8
以及更低版本的浏览器的原因。
下面我们来看一下Object.defineProperty
基本使用
修改data
对象中的msg
属性的值,实现视图的更新.(这也就是我们所说的响应式)
在进行测试的时候,可以在浏览器的控制台中,输入vm.msg
进行测试。
在上面的代码中,我们是将一个对象中的属性转换成了getter/setter
的形式,那么这里我们还有一个问题:
如果有一个对象中多个属性需要转换getter/setter
,那么应该如何处理?
我们可以通过循环遍历的方式,将对象中的多个属性转换成getter/setter
在上面的代码中,我们通过循环的方式给data
对象中的每个属性添加了getter/setter
.
这里我们只是在视图中展示了msg
属性的值,如果想展示count
属性的值,可以在浏览器的控制台中,通过vm.count=20
这种形式来展示,当然,在后期的课程中我们会分别展示出msg
与count
属性的值,
4|23.2 Vue3响应式原理
Vue3
的响应式原理是通过Proxy
来完成的。
Proxy
直接监听对象,而非属性,所以将多个属性转换成getter/setter
的时候,不需要使用循环。
Proxy
是ES6
课程中新增的,IE
不支持
Proxy
实现响应式的基本代码如下(该代码的功能与上面所讲解的是一样的):
通过以上的代码我们发现使用Proxy
的代码是给对象中所有属性添加getter/setter
,而不需要通过循环的方式来实现,所以代码更加的简洁。
5|04、发布订阅模式
发布订阅模式:订阅者,发布者,信号中心
家长向学生所在的班级订阅了获取学生考试成绩的事件,当老师公布学生的成绩后,就会自动通知学生的家长。
在整个案例中,学生所在的班级为信号中心,老师为发布者,家长为订阅者
Vue
的自定义事件就是基于发布订阅模式来实现的。
下面通过Vue
中兄弟组件通信过程,来理解发布订阅模式
通过以上代码,我们可以理解发布订阅模式中的核心概念。
下面我们模拟Vue
中的自定义事件的实现
下面我们先来做一个基本的分析:
先来看如下代码:
通过上面的代码,我们可以看到$on
实现事件的注册,而且可以注册多个事件,那么我们可以推测在其内部有一个对象来存储注册的事件,对象的格式为:
以上格式说明了,我们注册了两个事件,分别为click
与change
.
下面我们根据以上的分析过程,来模拟实现自定义事件。
6|05、观察者模式
Vue
的响应式机制使用了观察者模式,所以我们首先要先了解一下观察者模式
观察者模式与发布订阅模式的区别是,观察者模式中没有事件中心,只有发布者与订阅者,并且发布者需要知道订阅者的存在。
观察者(订阅者)---Watcher
update():
当事件发生时,具体要做的事情。
目标(发布者)--Dep
subs
数组:存储所有的观察者
addSub()
添加观察者,将其保存到subs
数组中
notify()
: 当事件发生后,调用所有观察者的update()
方法。
没事事件中心
具体代码实现如下:
下面我们看一下观察者模式与发布订阅模式的区别。
观察者模式:是由具体目标调度的,比如当事件触发,Dep
就会去调用观察者的方法,所以观察者模式的订阅者与发布者之间是存在依赖的。
发布订阅模式:由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在。
7|06、模拟Vue响应式原理--Vue
当我们在使用Vue
的时候,首先会根据Vue
类来创建Vue
的实例。
那么Vue
类主要的功能如下:
- 负责接收初始化的参数(选项)
- 负责把
data
中的属性注入到Vue
实例,转换成getter/setter
(可以通过this
来访问data
中的属性) - 负责调用
observer
监听data
中所有属性的变化(当属性值发生变化后更新视图) - 负责调用
compiler
解析指令/差值表达式
结构
Vue
中包含了_proxyData
这个私有方法,该方法的作用就是将data
中的属性转换成getter/setter
并且注入到Vue
的实例中。
模拟Vue/js/vue.js
基本代码实现如下:
在Vue
类中,我们主要实现四项内容:
1、通过属性保存选项的数据
2、把data
中的成员转换成getter
和setter
,注入到vue
实例中.
3、调用observe
r对象,监听数据的变化
4、调用compiler
对象,解析指令和差值表达式
在上面的代码中,我们首先实现了前两项内容。
下面进行测试。
index.html
的代码如下:
在模板中添加了差值表达式
,v-text
,v-model
内容,同时导入了我们自己创建的vue
,并且创建了Vue
的实例。
在浏览器的控制台中查看对应效果
8|07、Observer
Observer
的功能
- 负责把
data
选项中的属性转换成响应式数据 data
中的某个属性也是对象,把该属性转换成响应式数据(例如data
中的某个属性为Student
对象,也要将Student
对象中的属性转换成响应式)- 数据变化发送通知
observer.js
文件中的基本代码如下:
下面对以上代码进行测试。
在Vue
类的构造方法中的第三部,创建Observer
的实例,同时传递data
数据。
在index.html
文件中,导入observer.js
文件
注意:由于在vue.js
文件中使用了Observer
对象,所以这里先导入observer.js
文件。
下面我们修改一下代码,看一下效果:
在index.html
中,我们打印输出了vm
中的msg
的值,
这时候,会执行vue.js
文件中的get
方法,也会执行observer.js
文件中的get
方法。
如果将observer.js
文件中的get
方法修改成如下形式
会出现如下错误:
以上错误信息的含义为:堆栈溢出
为什么会出现以上错误呢?
因为obj
就是data
对象,而通过obj[key]
的方式来获取值,还是会执行get
方法,所以这里形成了死循环。
9|08、完善defineReactive方法
如果,我们在data
中添加一个对象,那么对象中的属性是否为响应式的呢?
在浏览器的控制台中,输出的person
对象是响应式的,但是其内部属性并不是响应式的,下面处理一下这块内容。
而Vue
中的对象是响应式的,对象中的属性也是响应式的。
关于这个问题的解决,非常的简单。
在observer.js
文件中的defineReactive
方法中,调用一次walk
方法就可以了。如下代码所示:
在上面的代码中,首先调用了this.walk(val)
方法,同时传递了val
这个参数。
这样在所调用walk
方法的内部,会先判断传递过来的参数的类型,如果不是对象,就停止执行walk
方法总的循环,而这时候会Object.defineProperty
,但是
如果传递过来的参数就是一个对象,那么会进行循环遍历,取出每一个属性,为其添加getter/setter
下面,我们在看另外一个问题,现在对index.html
中vue
对象中data
中的msg
属性重新赋值,并且赋值为一个对象,那么新赋值的这个对象的成员是否为响应式的呢?下面我们来测试一下:
在浏览器的控制台中,打印vm
,看一下对应的效果
通过上图,可以发现新赋值给msg
属性的对象中的属性并不是响应式的,所以接下来,我们需要为其改造成响应式的。
当我们给msg
属性赋值的时候,就会执行observer.js
文件中的defineReactive
方法中的set
操作,在这里我们可以将传递过来的值再次调用walk
方法,
这样又会对传递过来的值,进行判断是否为对象,然后进行遍历,同时为其属性添加getter/setter
通过上面的代码可以看到,在defineReactive
方法中的set
操作中,又调用了walk
方法,但是要注意的就是,这里需要处理this
指向的问题。
10|09、Compiler
功能
- 负责编译模板,解析指令/差值表达式
- 负责页面的首次渲染
- 当数据变化后重新渲染视图
通过以上功能的描述,可以总结出Compiler
主要就是对Dom
进行操作。
在js
目录下面创建compiler.js
文件,实现代码如下:
10|19.1 compile方法实现
在调用compile
方法的时候传递过来的参数el
就是模板,也就是index.html
中的<div id="app"></div>
中的内容。
所以我们在compile
方法中要遍历模板中的所有节点。
以上就是compile
方法的基本实现.
10|29.2 compileText方法实现
compileText
方法的作用就是对对插值表达式进行解析
.
在编写compileText
方法之前,我们先测试一下前面写的代码。
首先在compiler.js
文件中的构造方法中,调用compile
方法。
在vue.js
文件中创建Compiler
类的实例,传递的是Vue
的实例。
在第四步中,创建了Comiler
类的实例。
同时需要在index.html
文件中引入comiler.js
文件。
注意导入的顺序。
在compiler.js
文件中的comileText
方法中可以先打印一下文本节点,看一下具体的文本节点。
下面完善一下compileText
方法的实现如下:
这时刷新浏览器,就可以看到对应效果。
10|39.3 compileElement方法实现
compileElement
方法,就是完成指令的解析。
在这里我们重点解析的指令为v-text
与v-model
这些指令本身就是html
标签的属性。
通过以上的代码,我们可以看到,如果想以后在处理其它的指令,只需要添加方法就可以了,方法的名字后缀一定要有Updater
.
这比写很多的判断语句方便多了。
compiler.js
文件完整代码
当页面首次渲染的时候,把数据更新到视图的功能,我们已经完成了,但是还没有实现对应的响应式,也就是数据更改后,视图也要进行更新。
下面我们就来实现对应的响应式机制。
11|010、Dep类
下面我们先来实现Dep
这个类。
该类的功能:
什么时候收集依赖呢?
也就是在getter
中收集依赖,添加观察者
什么时候通知观察者呢?
在setter
中通知依赖,通知观察者
在dep.js
文件中编写如下代码:
修改Observer
类中的代码
首先针对每一个响应式数据添加了一个Dep
对象(发布者),然后在set
方法中,当数据发生了变化后,会调用dep
中的notify
方法,完成更新视图的操作。
在set
方法中添加依赖,也就是将watcher
观察者添加到了Dep
中的subs
数组中。
以上代码无法进行测试,完成Watcher
类可以进行测试
12|011、Watcher类
12|111.1 Watcher类创建
在编写Watcher
类之前,我们先来看一张图,理解一下Dep
与Watcher
的关系
通过前面的学习,我们知道在Observer
类中为每一个响应式的数据创建了Dep
对象,而且在getter
中会收集依赖,所谓收集依赖就是将watcher
观察者添加到subs
数组中.
而在setter
中会触发依赖,其实就是调用Dep
对象中notify
方法,该方法会获取subs
数组中的所有的watcher
,然后执行watcher
中的update
方法来更新对应的视图。
Watcher
类的代码如下:
接下来还有一件事情需要处理一下:
当创建了·Watcher
对象后,需要将当前创建的Watcher
对象添加到Dep
中的subs
数组中。
我们可以查看Observer
类,在get
方法中已经写过将Watcher
对象添加到Dep
中的subs
数组中了( Dep.target && dep.addSub(Dep.target);
),但是
问题是,我们并没有创建target
属性,所以下面我们创建一下target
属性。
下面在Watcher
类的构造方法中,添加给Dep
添加target
属性,用来保存Watcher
的实例。
以上内容需要重点去体会.
12|211.2 创建Watcher对象
下面来看一下关于Watcher
对象的创建。
下面要在index.html
文件中导入相关的js
文件。
注意:以上导入文件的顺序,由于在watcher.js
文件中使用了dep.js
文件中的内容,所以先导入dep
,同样在compiler.js
文件中使用了watcher.js
文件中内容,所以先导入了watcher.js
.
下面可以进行测试了。
先将index.html
文件中的,如下语句注释掉:
然后,打开浏览器的控制台,输入如下内容
对应的页面视图中的内容也发生了变化。这也就实现了响应式机制,所谓响应式就是当数据变化了,对应的视图也会进行更新。
所以需要在textUpdater
和modelUpdater
方法中完成Watcher
对象的创建。
13|012、双向数据绑定
这一小节,我们看一下Vue
的双向数据绑定。
双向数据绑定包含两部分内容,数据变化更新视图,视图变化更新数据。
怎样实现双向绑定呢?
基本的思路就是,我们可以给文本框(第一个文本框)添加一个input
事件,在输入完数据后触发该事件,同时将用户在文本框中输入的数据赋值给data
中的属性(视图变化,更新数据,而当数据变化后,会执行行observer.js
中的set
方法,更新视图,也就是触发了响应式的机制)。
那么我们应该在哪实现数据的双向绑定呢?
我们知道,这里是对文本框的操作,所以需要compiler.js
文件中的modelUpdater
方法中,实现双向绑定。因为modelUpdater
方法就是处理v-model
.
在上面的代码中,我们为当前的文本框节点添加了input
事件,当在文本框中输入内容的时候会触发该事件,同时,将用户在文本框节点中输入的值重新赋值给了data
中对应的属性。
下面我们可以进行测试,在文本框中输入值,对应的差值表达式和v-text
中的内容都会发生改变。同时在控制台中输出vm.msg
的值会发现数据也发生了变化。
而我们知道,当给data
中的属性赋值后,会执行observer.js
中的set
方法,更新视图,也就是触发了响应式的机制。
现在整个Vue
的模拟实现,我们就完成了。
当然,我们这里只是模拟了最核心的内容也就是数据响应式与双向绑定。
14|013、总结
首先我们先来看一下最开始提出的问题。
第一个:给属性重新赋值成对象,是否是响应式的?答案:是响应式的。
应当我们给data
中的属性
进行重新赋值的时候,会执行Observer
类中的defineReactive
方法的set
方法
在set
方法中,调用了walk
方法,该方法中判断重新给data
属性中赋的值是否为对象,如果是对象,会将对象中的每个属性都修改成响应式的。
第二个问题:给Vue
实例新增一个成员是否是响应式的?
例如如下代码:
在index.html
文件中,创建了Vue
的实例后,给Vue
实例后新增了test
的属性,那么这个test
属性是否为
响应式的呢?
答案:不是响应式的。
因为,我们所有的操作都是在创建Vue
的实例的时候完成的,也就是在Vue
类的构造函数中完成的。
在Vue
类的构造函数中,创建了Observer
的实例,完成了监听数据的变化。
所以当Vue
的实例创建完成后,在为其添加属性,该属性并不是一个响应式的。
当然,为了解决这个问题,Vue
中也给出了相应的解决方案,可以查看官方的文档:
__EOF__

本文链接:https://www.cnblogs.com/ShihaoHuang/p/15819632.html
关于博主:I am a good person
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战