Vue驱动原理

前言

面试的时候问起vue的原理,大部分的人都会说通过Object.defineProperty修改属性的get, set方法,从而达到数据改变的目的。然而作为vue的MVVM驱动核心,从数据的改变到视图的改变,远远不止这句话就能解释,而是通过Observer, Dep, Watcher, Compile 4个类以及一个CpompileUtil辅助类完成,本文将以深入浅出的方式,分析从初始化DOM和data到数据的渲染,MVVM背后究竟发生了什么

本文代码翻译于文章

掘金——看完这篇关于MVVM的文章,面试通过率提升了80%

源码

本文源码 github 欢迎star

思维导图

MVVM驱动.png

开始

构建一个MVVM实例

首先构建一个DOM以及一个数据源data,通过这两个属性,构建一个vm实例,接着构建一个Observer对象

  constructor (options) {
    this.$el = options.el
    this.$data = options.data

    if (this.$el) {
      let _
      _ = new Observer(this.$data)
      this.proxyData(this.$data)
      _ = new Compile(this.$el, this)
    }
  }

Observer

  constructor (data) {
    this.observe(data)
  }

Observer的构造方法中将会调用observe方法遍历检测每一个属性,如果该属性不是对象则返回,否则调用defineReactive方法拦截每一个属性的get, set方法,defineReactTive也会新建一个依赖收集器Dep

Dep

class Dep {
  static target: Watcher

  private subs: Watcher[] = []

  public addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  public notify () {
    this.subs.forEach(watcher => watcher.update())
  }

}

这个依赖收集器的代码比较简单,内置一个Watcher数组,当defineReactive修改属性的get方法时,根据Dep.target是否存在将Wathcher加入到Dep的数组中,每次属性改变set时,调用这个属性的Dep.notify方法通知订阅该属性的Watcher修改自己的状态

Compile(在Vue中,这个步骤是交给virtualDOM完成的,这里只是简单的实现一个文本节点的编译)

完成数据项的响应适配后(defineReactive, 生成Dep两个步骤),接着开始编译绑定的el节点

  constructor (el: any, vm: MVVM) {
    this.el = this.isElementNode(el) ? el : document.querySelector(el)
    this.vm = vm
    if (this.el) {
      const fragment = this.node2fragment(this.el)

      this.compile(fragment)

      this.el.appendChild(fragment)
    }
  }

首先很重要的一步,将el的childNodes创建为一个fragment,这样接下来就能够在内存中对DOM结构进行操作,避免频繁的访问真实DOM带来性能的开销问题。

根据fragment进行编译

根据每一个childNode进行判断其类型

如果childNode是一个Element的元素,则获取其attributes属性,判断其中有无相应的指令v-xx等,根据其指令在CompileUtil中找到方法,然后添加到Dep中。继续递归调用compile方法,直到最终的node类型为text为止

如果childNode是一个text类型的Node,在调用compileText方法

compileText

获取该节点的textContent属性,其中的值就是expr表达式,接着调用CompileUtil中的方法对整个expr进行操作

CompileUtil

找到CompileUtil的对应的updateFn方法,利用数组的reduce拆解expr并获取属性,这里设计的很巧妙

static setVal (vm: MVVM, expr, value) {
  expr = expr.split('.')
  return expr.reduce((prev, next, currentIndex) => {
    if (currentIndex === expr.length - 1) {
      return prev[next] = value
    }
    return prev[next]
  }, vm.$data)
}
// 已school.profession为例,调用这个方法将会拆解为
// ['school', 'profession']
// vm.$data.school
// vm.$data.school.profession

在进行编译的时候,有两次获取到对应的vm.$data中的属性。第一次是为了在初次构建的时候获取值进行DOM的渲染,此时Dep.target为null,第二次是为了将updateFn添加到属性的Dep中。这里便解释了为什么进行Dep添加时为什么要判断是否存在Dep.target对象。因为初始化的时候,并不需要进行依赖收集

数据发生改变

当data中的某一项数据发生改变时,将调用这个属性的Dep的notify方法,通知订阅了该属性的Watcher调用自身的update方法改变DOM

总结

  1. vue就是通过以上的几个类实现了完整的MVVM模式,不同的是vue拥有更加完整的CpmpileUtil方法,针对每一个指令以及一些绑定添加特殊的updateFn方法。vue也使用了virtualDOM统一管理了对于DOM的操作
  2. 纵观这个MVVM的实现,发现其核心思想还是订阅发布模式,每一个属性都有一个依赖收集器,每个使用到这个属性的DOM或者衍生属性都会向依赖收集注册一个自身的方法,当属性发生改变时,Dep将通知他们执行自身的方法,这里也是一个高度解耦的设计。而这种基于事件改变的订阅发布模式,也是整个JS无论前端后者后端的灵魂所在
  3. 还没有深入研究vue的computed、methods以及watch属性的实现,不过从现有的代码来看,可能就是各自实现了独特的Watcher,其中有着不同的updateFn方法

以上都是我瞎编的

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏不止是前端

问起Vue的原理时不要再只说defineProperty了

1834
来自专栏思考的代码世界

Python网络数据采集之HTML解析|第01天

1624
来自专栏码洞

会玩Go!会玩Python!嘭!Go-Python!

Golang是静态语言,性能很好,当它不那么灵活,不好在运行时动态运行代码。Python是动态语言,非常灵活,但是性能很差。古人云:“鱼和熊掌不能兼得”。但是如...

3001
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

1.1K2
来自专栏前端架构与工程

【翻译】JavaScript内存泄露

我们在进行JavaScript开发时,很少会考虑内存的管理。JavaScript中变量的声明和使用看起来是一件很轻松的事,底层的细节处理交给浏览器去做就好了。 ...

2796
来自专栏Flutter入门

Vue 绑定简单分析实现

使用js es6 中 Object.defineProperty为我们自己定义的VM创建示例。同时这个方法通过提供了set.get方法的触发我们的监听事件。

1331
来自专栏IMWeb前端团队

谁说你只是"会用"jQuery?

前言 套用上篇文章向zepto.js学习如何手动触发DOM事件 的开头??? 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,...

2236
来自专栏c#开发者

selenum参考手册中文翻译

Added by SpringSideTeam, last edited by SpringSideTeam on 2006-11-23  (view chan...

2816
来自专栏开发与安全

VS2008 + Opencv2.1 读取图片像素输出至Excel文件

系统环境: win 7 + VS2008 + Opencv2.1 + Excel 2010 思路:先通过Opencv库函数读取图片存储至IplImage结构体中...

4078
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交 本节主要演示扩展Datagrid行内...

4789

扫码关注云+社区

领取腾讯云代金券