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插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 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
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
python实现查询IP地址所在地
2015/03/29 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python实现抖音视频批量下载
2018/06/20 Python
Python3 log10()函数简单用法
2019/02/19 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
卫校中专生个人自我评价
2013/09/19 职场文书
副总经理任命书
2014/06/05 职场文书
党员一帮一活动总结
2014/07/08 职场文书
女生抽烟检讨书
2014/10/05 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
Django中的JWT身份验证的实现
2021/05/07 Python
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python