通过图带你深入了解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判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
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
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
js截取小数点后几位的写法
2013/11/14 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
学习python类方法与对象方法
2016/03/15 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python中的变量和作用域详解
2016/07/13 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
struct与class的区别
2014/02/03 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
百度吧主申请感言
2014/01/12 职场文书
五四青年节演讲稿
2014/05/26 职场文书
大学生工作自荐书
2014/06/16 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python