Vue如何实现响应式系统


Posted in Javascript onJuly 11, 2018

前言

最近深入学习了Vue实现响应式的部分源码,将我的些许收获和思考记录下来,希望能对看到这篇文章的人有所帮助。有什么问题欢迎指出,大家共同进步。

什么是响应式系统

一句话概括:数据变更驱动视图更新。这样我们就可以以“数据驱动”的思维来编写我们的代码,更多的关注业务,而不是dom操作。其实Vue响应式的实现是一个变化追踪和变化应用的过程。

vue响应式原理

以数据劫持方式,拦截数据变化;以依赖收集方式,触发视图更新。利用es5 Object.defineProperty拦截数据的setter、getter;getter收集依赖,setter触发依赖更新,而组件render也会变为一个watcher callback被加入相应数据的依赖中。

发布订阅

利用发布订阅设计模式实现,Observer作为发布者,Watcher作为订阅者,两者无直接交互,通过Dep进行统一调度。
Observer负责拦截get, set;get时触发dep添加依赖,set时调度dep发布;添加Watcher时会触发订阅数据的get,并加入到dep调度中心的订阅者队列中。

以下的UML类图是Vue实现响应式功能的类,以及他们之间的引用关系。

只包含部分属性方法

Vue如何实现响应式系统

上图中的类已经标识的蛮清楚了,但是还是需要一个调用关系图,让调用过程更加清晰,如下图所示。

响应式data对象中,每一项key的劫持get/set函数都闭包了Dep调度实例,这张图显示了一个key更改过程中的数据流转。

Vue如何实现响应式系统

部分源码

数据变更过程中的订阅/发布模型上图已经清晰的展示了,从图中我们已经知道了可以通过增加watcher来订阅某一项数据的变更。那么,我们只需要把组件render作为一个watcher订阅的话,数据驱动视图的渲染岂不是水到渠成了。Vue正是这么做的!
以下代码片段来自Vue.prototype._mount函数

callHook(vm, 'beforeMount')
vm._watcher = new Watcher(vm, () => {
 vm._update(vm._render(), hydrating)
}, noop)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
 vm._isMounted = true
 callHook(vm, 'mounted')
}

一些问题思考

#person赋值新的对象,新对象里的属性是否也是响应式的呢?

var vm = new Vue({
 el: '#app',
 data: () => ({
  person: null
 })
})
vm.person = {name: 'zs'}
setTimeout(() => {
 // 更改name
 vm.person.name = 'finally zs'
}, 3000)

答案:是响应式的。

原因:因为Vue劫持set时,会对value再次做observe,源码如下。

function reactiveSetter (newVal) {
 /* ...省略部分代码 */
 // 这里会再次对新的value做拦截
 childOb = observe(newVal)
 dep.notify()
}

#当我们监听多层属性时,上层引用变更,是否会触发回调?

var vm = new Vue({
 data: () => ({
  person: {name: '令狐洋葱'}
 }),
 watch: {
  'person.name'(val) {
   console.log('name updated', val)
  }
 }
})
vm.person = {}

答案:会。

原因:person.name作为一个表达式传入Watcher时,会被解析成类似这样的函数

() => {this.vm.person.name}

这样就会先触发person get, 然后触发name get;所以我们配置的回调函数,不仅仅加入到了name依赖中,person也有。

#接着上个问题,person如果被赋值了新的对象,老对象和老对象上的依赖如何垃圾回收的?

  • 老对象的回收:由于老对象的直接引用只有vue实例上的person,person切换到了新的引用,所以老对象没有引用了,就会被回收掉。
  • 老对象上的依赖dep,watcher的依赖里还存在;但是在run执行时,会调用watcher的get() 获取当前值;get中会执行新的依赖收集,并在收集完毕后,清空老的依赖。

具体源码如下:

/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
  pushTarget(this)
  const value = this.getter.call(this.vm, this.vm)
  // "touch" every property so they are all tracked as
  // dependencies for deep watching
  if (this.deep) {
    traverse(value)
  }
  popTarget()
  this.cleanupDeps()
  return value
}

#当我们多次同步修改name时,回调函数是否会触发多次?

var vm = new Vue({
  data: () => ({
    person: {name: '令狐洋葱'}
  }),
  watch: {
    'person.name': (val) {
      console.log('name updated: ' + val)
    }
  }
})
vm.person = {name: 'zs'}
vm.person.name = '无敌'

答案: 不会,因为watch回调函数执行是异步的,且会去重。可以通过sync强制配置成同步run,就会执行2次了。

自己实现一个响应式系统

只包含核心功能,具体源码可以看这里https://github.com/Zenser/z-vue,欢迎来star。

实现功能非常基础啦,重在理解,功能不全的。

Observer

class Observe {
  constructor(obj) {
    Object.keys(obj).forEach(prop => {
      reactive(obj, prop, obj[prop])
    })
  }
}
function reactive(obj, prop) {
  let value = obj[prop]
  // 闭包绑定依赖
  let dep = new Dep()
  Object.defineProperty(obj, prop, {
    configurable: true,
    enumerable: true,
    get() {
      //利用js单线程,在get时绑定订阅者
      if (Dep.target) {
        // 绑定订阅者
        dep.addSub(Dep.target)
      }
      return value
    },
    set(newVal) {
      value = newVal
      // 更新时,触发订阅者更新
      dep.notify()
    }
  })
  // 对象监听
  if (typeof value === 'object' && value !== null) {
    Object.keys(value).forEach(valueProp => {
      reactive(value, valueProp)
    })
  } 
}

Dep

class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    if (this.subs.indexOf(sub) === -1) {
      this.subs.push(sub)
    }
  }
  notify() {
    this.subs.forEach(sub => {
      const oldVal = sub.value
      sub.cb && sub.cb(sub.get(), oldVal)
    })
  }
}

Watcher

class Watcher {
  constructor(data, exp, cb) {
    this.data = data
    this.exp = exp
    this.cb = cb
    this.get()
  }
  get() {
    Dep.target = this
    this.value = (function calcValue(data, prop) {
      for (let i = 0, len = prop.length; i < len; i++ ) {
        data = data[prop[i]]
      }
      return data
    })(this.data, this.exp.split('.'))
    Dep.target = null
    return this.value
  }
}

参考文档:https://cn.vuejs.org/v2/guide/reactivity.html

Javascript 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
vue模板语法-插值详解
Mar 06 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
微信小程序版翻牌小游戏
Jan 26 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 #Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 #Javascript
vue使用中的内存泄漏【推荐】
Jul 10 #Javascript
Vue脚手架的简单使用实例
Jul 10 #Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 #Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 #Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
专营店会计助理岗位职责
2013/11/29 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
校长就职演讲稿
2014/01/06 职场文书
联谊会主持词
2014/03/26 职场文书
董事长秘书工作职责
2014/06/10 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle