通过图带你深入了解vue的响应式原理


Posted in Javascript onJune 21, 2019

前言

如果自己去实现数据驱动的模式,如何解决一下几个问题:

  • 通过什么手段去知道我的数据变了?
  • 通过什么东西去同步更新视图?

数据劫持——obvserver

我们需要知道数据的获取和改变,数据劫持是最基础的手段。在Obeserver中,我们可以看到代码如下:

Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// ...
},
set: function reactiveSetter (newVal) {
// ...
}
})

通过Object.defineProperty这个方法,我们可以在数据发生改变或者获取的时候,插入一些自定义操作。同理,vue也是在这个方法中做依赖收集和派发更新的。

绑定和更新视图——watcher

从初始化开始,我们渲染视图的时候,便会生成一个watcher,他是监视视图中参数变化以及更新视图的。代码如下:

// 在mount的生命钩子中
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)

当然,我们可以保留疑问:

  • watcher是怎么去更新视图的
  • 数据又是怎么和watcher联动起来的

具体的绑定和更新的流程,我们到后续的依赖收集中讲解。

我们先来讲讲响应式系统中涉及到的设计模式。

发布订阅模式

在发布订阅模式中,发布者和订阅者之间多了一个发布通道;一方面从发布者接收事件,另一方面向订阅者发布事件;订阅者需要从事件通道订阅事件

以此避免发布者和订阅者之间产生依赖关系

通过图带你深入了解vue的响应式原理

vue的响应式流程

vue的响应式系统借鉴了数据劫持和发布订阅模式。

通过图带你深入了解vue的响应式原理

Vue用Dep作为一个中间者,解藕了Observer和Watcher之间的关系,使得两者的职能更加明确。

那具体是如何来完成依赖收集和订阅更新的呢?

依赖收集过程

依赖收集的流程

举个例子

<div id="app">
{{ message }}
{{ message1 }}
<input type="text" v-model="message">
<div @click="changeMessage">改变message</div> 
</div>
var app = new Vue({
el: '#app',
data: {
message: '1',
message1: '2',
},
methods: {
changeMessage() {
this.message = '2'
}
},
watch: {
message: function(val) {
this.message1 = val
}
}
})

依赖收集流程图:

通过图带你深入了解vue的响应式原理

如何看懂这个依赖收集流程?关键在watcher代码中:

get () {
pushTarget(this)
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
// 省略
} finally {
if (this.deep) {
traverse(value)
}
popTarget()
this.cleanupDeps()
}
return value
}

调用的这个this.getter有两种,一种是key值的getter方法,还有一种是expOrFn,比如mounted中传入的updateComponent。

如何防止重复收集

我们不妨想想什么才算是重复收集了?

笔者想到一种情况:就是dep数组中,出现了多个一样的watcher。

比如renderWatch就容易被重复收集,因为我们在html模版中,会重复使用data中的某个变量。那他是如何去重的呢?

1、只有watch在执行get时,触发的取数操作,才会被收集

Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
// ...
}
return value
},
set: function reactiveSetter (newVal) {
// ...
dep.notify()
}
})

当只有Dep.target这个存在的时候才进行依赖收集。Dep.target这个值只有在watcher执行get方法的时候才会存在。

2、在dep.depend的时候会判断watch的id

depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}

我们会发现,在depend过程中,会有一个newDepIds去记录已经存入的dep的id,当一个watcher已经被该dep存过时,便不再会进行依赖收集操作。

派发更新过程

收集流程讲完了,不妨在听听更新流程。

订阅更新的流程

老例子

<div id="app">
{{ message }}
{{ message1 }}
<input type="text" v-model="message">
<div @click="changeMessage">改变message</div> 
</div>
var app = new Vue({
el: '#app',
data: {
message: '1',
message1: '2',
},
methods: {
changeMessage() {
this.message = '3'
}
},
watch: {
message: function(val) {
this.message1 = val
}
}
})

依赖收集的最终结果:

通过图带你深入了解vue的响应式原理

当触发click事件的时候,便会触发订阅更新流程。

订阅更新流程图:

通过图带你深入了解vue的响应式原理

当renderWatch执行更新的时候,回去调用beforeUpdate生命钩子,然后执行patch方法,进行视图的变更。

如何防止重复更新

如何去防止重复更新呢?renderWatch会被很多dep进行收集,如果视图多次渲染,会造成性能问题。

其实问题的关在在于——queueWatcher

在queueWatcher中有两个操作:去重和异步更新。

function queueWatcher (watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
queue.push(watcher)
// ...
if (!waiting) {
waiting = true
// ...
nextTick(flushSchedulerQueue)
}
}
}

其实queueWatcher很简单,将所有watch收集到一个数组当中,然后去重。

这样至少可以避免renderWatch频繁更新。

比如上述例子中的,message和message1都有一个renderWatch,但是只会执行一次。

异步更新也可以保证当一个事件结束之后,才会触发视图层的更新,也能防止renderWatch重复更新

结尾

文章讲述了响应式流程的原因,代码细节并未深入,

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
简单实现js页面切换功能
Jan 10 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
10种JavaScript最常见的错误(小结)
Jun 21 #Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 #Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 #Javascript
如何测量vue应用运行时的性能
Jun 21 #Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 #Javascript
如何提升vue.js中大型数据的性能
Jun 21 #Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 #Javascript
You might like
php 小乘法表实现代码
2009/07/16 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JavaScript的setter与getter方法
2017/11/29 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
英语专业毕业个人求职自荐信
2013/09/21 职场文书
大学生毕业自荐信
2013/10/10 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
高校教师思想汇报
2014/01/11 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
节约用电标语
2014/06/17 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
2014年安全员工作总结
2014/11/13 职场文书
导游词之青城山景区
2019/09/27 职场文书