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 相关文章推荐
document.documentElement和document.body区别介绍
Sep 16 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
十大“创意”战术!
2020/03/04 星际争霸
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
img标签中onerror用法
2009/08/13 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
理解JavaScript原型链
2016/10/25 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python导入坐标点的具体操作
2019/05/10 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
办公室主任职责范文
2013/11/08 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
横幅标语大全
2014/06/17 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
廉政承诺书
2015/01/19 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
python运算符之与用户交互
2022/04/13 Python