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

前言

面试的时候问起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方法

以上都是我瞎编的

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 10 JFace开发详解

前几篇讲过SWT的使用,但是SWT是基本的小控件,只能针对使用简单的数据类型,比如字符串,数字等等。但是遇到了复杂的类,该怎么办呢? ?   不要担心!这...

3295
来自专栏WindCoder

Java设计模式学习笔记—适配器模式

文章最后“Java设计模式笔记示例代码整合”为本系列代码整合,所有代码均为个人手打并运行测试,不定期更新。本节内容位于其Adapter包(package)中。

681
来自专栏移动开发之家

Dagger2的轻松愉悦解析

  Dagger2,依赖注入框架,一个刚接触时感觉麻烦,用久了就会“嘴上说不要,身体却很诚实”的开发润滑剂(◐‿◑)。(本文为拖更而生)

491
来自专栏青玉伏案

ReactiveSwift源码解析(一) Event与Observer代码实现

ReactiveCocoa这个框架是做什么用的本篇博客就不做过多赘述了,什么是“响应式编程”也不多聊了,自行Google吧。本篇博客的主题是解析Reactive...

20410
来自专栏SHERlocked93的前端小站

JS 状态模式

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。 其实就是用一个对象或者数组记录一组状态,每个状态对应一个实现...

694
来自专栏菩提树下的杨过

温故而知新:c#中的特性(attribute)

特性(Attribute)是微软在.Net中自创的一种新技术,对于很多初学者来讲,特性一直是一块难啃的骨头。 既然弄不懂,那我们就暂时绕过它吧,回想一下我们在写...

1739
来自专栏Flutter入门到实战

谈谈模板方法设计模式的使用

在项目中经常会遇到一个类的某些方法和另一个类的某些方法功能是相同的,只有部分方法是不同的。这个时候就可以使用模板方法来操作了。其实这种情况很常见:比如我们项目里...

732
来自专栏SHERlocked93的前端小站

Vue源码阅读 - 依赖收集原理

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在...

732
来自专栏desperate633

设计模式之模版方法模式(the Template Method Pattern)

我们发现制作茶和咖啡的基本步骤有两步是一样的,如果我们直接实现,也就是各实现各的算法,那么显然,会产生重复的代码,也就是boilWater和pourInCup是...

562
来自专栏李海辰的专栏

Unity引擎资源管理代码分析 ( 2 )

上一篇《Unity 引擎资源管理代码分析 ( 1 ) 》讲解了 Unity 引擎资源管理代码的类型设计架构和 Resources.Load 接口的实现,本文将...

4703

扫码关注云+社区