Vue源码解读（预）：手写一个简易版Vue

MVVM 设计模式，是由 MVC、MVP 等设计模式进化而来，M - 数据模型（Model），VM - 视图模型（ViewModel），V - 视图层（View）。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

mvvm

Vue中的MVVM思想

使用 MVVM 设计模式的前端框架很多，其中渐进式框架 Vue 是典型的代表，深得广大前端开发者的青睐。

MVVM

从上图中可以看出MVVM主要分为这么几个部分：

  • 模板编译(Compile)
  • 数据劫持(Observer)
  • 订阅-发布(Dep)
  • 观察者(Watcher)

我们来看一个 vue 的实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const VM = new Vue({
      el: '#app',
      data: {
        number: 0
      },
    })
    setInterval(() => {
      VM.number++
    }, 1000)
  </script>
</body>
</html>

我们对原理进行分析一下：

  • 首先 new Vue() 执行初始化，通过 Observer 对 data 上的属性执行响应式处理。也就是 Object.defineProperty 对数据属性进行劫持。
  • 通过Compile 进行模板编译，对模板里动态绑定的数据，使用 data 数据进行初始化。
  • 在模板初始化时，在触发Object.defineProperty 内的 getter 时，创建更新函数和 Watcher 类。
  • 同一属性在模板中可能出现多次，就会创建多个Watcher ，就需要Dep 来统一管理。
  • 当数据发生变化时，找到属性对应的 dep ，通知所有 Watcher 执行更新函数。

创建Vue类

// 创建 Vue 类
class Vue {
  constructor(options) {
    // 保存选项
    this.$options = options;
    this.$data = options.data;
    // 响应式处理
    observe(this.$data)
    // 将数据代理到实例上
    proxyData(this, '$data')
    // 用数据和元素进行编译
    new Compiler(options.el, this)
  }
}
// 代理数据的方法
function proxyData (vm, sourceKey) {
  Object.keys(vm[sourceKey]).forEach(key => {
    Object.defineProperty(vm, key, {
      get () {
        return vm[sourceKey][key]
      },
      set (newVal) {
        vm[sourceKey][key] = newVal
      }
    })
  })
}

上面代码创建了一个 Vue 类和 proxyData 方法，Vue 类接收 options 参数，内部调用 observe 方法对传入参数 options.data 数据，递归进行响应式处理。
使用 proxyData 方法把数据代理到实例上，让我们获取和修改数据的时候可以直接通过 this 或 this.$data, 如： this.number 或 this.$data.number 。
最后使用 Compiler 对模板进行编译，初始化动态绑定的数据。

模板编译（Compile）

// 模板编译
class Compiler {
  constructor(el, vm) {
    this.$vm = vm;
    this.$el = document.querySelector(el);
    if (this.$el) {
      // 执行编译
      this.compile(this.$el)
    }
  }
  compile (el) {
    // 遍历 el 树
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach((node) => {
      if (this.isElementNode(node)) { // 元素节点
        // 编译元素节点的方法
        this.compileElement(node)
      } else { // 文本节点
        // 编译文本节点的方法
        this.compileText(node)
      }
      // 如果还有子节点，继续递归
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node);
      }
    })
  }
  // 判断是否是元素节点
  isElementNode (node) {
    return node.nodeType === 1
  }
  // 判断属性是否为指令
  isDirective (attr) {
    return attr.indexOf('v-') === 0
  }
  // 编译元素
  compileElement (node) {
    // 遍历节点属性
    const nodeAttrs = node.attributes
    Array.from(nodeAttrs).forEach((attr) => {
      const attrName = attr.name // 属性名
      const exp = attr.value // 动态判定的变量名
      //找到 v-xxx 的指令，如 v-text/v-html
      if (this.isDirective(attrName)) {
        let [, dir] = attrName.split("-") // 指令名 如 text/html
        // 调用指令对应得方法
        this[dir] && this[dir](node, exp)
      }
    })
  }
  // 编译文本
  compileText (node) {
    let txt = node.textContent; // 获取文本节点的内容
    let reg = /\{\{(.*)\}\}/; // 创建匹配 {{}} 的正则表达式
    // 如果存在 {{}} 则使用 text 指令的方法
    if (node.nodeType === 3 && reg.test(txt)) {
      this.update(node, RegExp.$1.trim(), 'text')
    }
  }
  update (node, exp, dir) {
    // 调用指令对应的更新函数
    const callback = this[dir + 'Updater'];
    callback && callback(node, this.$vm[exp])
    // 更新处理，创建 Watcher,保存更新函数
    new Watcher(this.$vm, exp, function (val) {
      callback && callback(node, val)
    })
  }
  // v-text
  text (node, exp) {
    this.update(node, exp, 'text')
  }
  textUpdater (node, value) {
    node.textContent = value
  }
  // v-html
  html (node, exp) {
    this.update(node, exp, 'html')
  }
  htmlUpdater (node, value) {
    node.innerHTML = value
  }
}

编译过程中，以根元素开始，也就是实例化 Vue 时传入的 options.el 进行递归编译节点，使用 isElementNode 方法判断是文本节点还是元素节点。
如果是文本节点，正则匹配（双大括号）{{ xxx }};使用 v-text 指令方式初始化读取数据。
若为元素节点，遍历属性，找到 v-text 或 v-html,初始化动态绑定的数据。
在初始化数据时，创建 Watcher 和更新函数。

数据劫持（Observer）

function observe (obj) {
  if (typeof obj !== 'object' || obj == null) {
    return;
  }
  // 传入境来的对象做响应式处理
  new Observer(obj)
}
function defineReactive (obj, key, val) {
  // 递归劫持数据
  observe(val)
  // 创建与 key 对应的 Dep 管理相关的 Watcher
  const dep = new Dep();
  //对数据进行劫持
  Object.defineProperty(obj, key, {
    get () {
      // 依赖收集
      Dep.target && dep.addDep(Dep.target)
      return val;
    },
    set (newVal) {
      if (newVal !== val) {
        // 如果 newVal 为 Object ,就需要对其响应式处理
        observe(newVal)
        val = newVal;
        // 通知更新
        dep.notify()
      }
    }
  })
}
class Observer {
  constructor(value) {
    this.value = value;
    if (typeof value === 'object') {
      this.walk(value)
    }
  }
  // 对象数据响应化
  walk (obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key])
    })
  }
}

上面代码，创建了 observe 和 defineReactive 方法，还有 Observer 类 。
observe 方法用于类型判断。
Observer 类收一个参数，若参数是 object 类型，调用 defineReactive 方法对其属性进行劫持。
在 defineReactive 方法中，通过 Object.defineProperty 对属性进行劫持。并对每个 key 创建 Dep 的实例，还记得模板编译时，对动态绑定的值，进行初始化的时候会创建 Watcher 吗？Watcher 内保存有对应的更新函数；defineReactive 中，数据被读取的时候，就会触发 getter , getter 中就会把 Watcher push 到对应的 Dep 中，这个过程就叫做依赖收集。当值发生改变的时候，触发 setter 调用这个key 所对应的 Dep 内的 notify 方法，通知更新。

订阅-发布（Dep）

class Dep {
  constructor() {
    this.deps = []
  }
  addDep (dep) {
    this.deps.push(dep)
  }
  notify () {
    this.deps.forEach(dep => dep.update())
  }
}

每个 key 都会创建一个 Dep ，每个 Dep 内都会有一个 deps 数组，用来同一管理这个 key 所对应的 Watcher 实例。
addDep 方法用于添加订阅。
notify 方法用于通知更新。

观察者（Watcher）

// 观察者，保存更新函数。
class Watcher {
  constructor(vm, key, updateFn) {
    this.vm = vm
    this.key = key
    this.updateFn = updateFn
    Dep.target = this // 在静态属性上保存当前实例
    this.vm[this.key] // 触发数据劫持 get
    Dep.target = null // 在读取属性 触发get后，依赖收集完毕，现在置空
  }
  update () {
    this.updateFn.call(this.vm, this.vm[this.key])
  }
}

Watcher 类接收三个参数，Vue 的实例、 绑定的变量名 key 和 updateFn 更新方法。Watcher 在模板编译时被创建。我们用 Dep.target 静态属性来保存当前的实例。主动触发一次响应式的 getter , 使其实例被添加到 Dep 中，完成依赖收集，完成后，将静态属性 Dep.target 置空。
内部创建一个 update 更新方法。在 Dep 的 notify 方法通知更新时被调用。

完整代码

// 模板编译
class Compiler {
  constructor(el, vm) {
    this.$vm = vm;
    this.$el = document.querySelector(el);
    if (this.$el) {
      // 执行编译
      this.compile(this.$el)
    }
  }
  compile (el) {
    // 遍历 el 树
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach((node) => {
      if (this.isElementNode(node)) { // 元素节点
        // 编译元素节点的方法
        this.compileElement(node)
      } else { // 文本节点
        // 编译文本节点的方法
        this.compileText(node)
      }
      // 如果还有子节点，继续递归
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node);
      }
    })
  }
  // 判断是否是元素节点
  isElementNode (node) {
    return node.nodeType === 1
  }
  // 判断属性是否为指令
  isDirective (attr) {
    return attr.indexOf('v-') === 0
  }
  // 编译元素
  compileElement (node) {
    // 遍历节点属性
    const nodeAttrs = node.attributes
    Array.from(nodeAttrs).forEach((attr) => {
      const attrName = attr.name // 属性名
      const exp = attr.value // 动态判定的变量名
      //找到 v-xxx 的指令，如 v-text/v-html
      if (this.isDirective(attrName)) {
        let [, dir] = attrName.split("-") // 指令名 如 text/html
        // 调用指令对应得方法
        this[dir] && this[dir](node, exp)
      }
    })
  }
  // 编译文本
  compileText (node) {
    let txt = node.textContent; // 获取文本节点的内容
    let reg = /\{\{(.*)\}\}/; // 创建匹配 {{}} 的正则表达式
    // 如果存在 {{}} 则使用 text 指令的方法
    if (node.nodeType === 3 && reg.test(txt)) {
      this.update(node, RegExp.$1.trim(), 'text')
    }
  }
  update (node, exp, dir) {
    // 调用指令对应的更新函数
    const callback = this[dir + 'Updater'];
    callback && callback(node, this.$vm[exp])
    // 更新处理，创建 Watcher,保存更新函数
    new Watcher(this.$vm, exp, function (val) {
      callback && callback(node, val)
    })
  }
  // v-text
  text (node, exp) {
    this.update(node, exp, 'text')
  }
  textUpdater (node, value) {
    node.textContent = value
  }
  // v-html
  html (node, exp) {
    this.update(node, exp, 'html')
  }
  htmlUpdater (node, value) {
    node.innerHTML = value
  }
}
// 创建 Vue 类
class Vue {
  constructor(options) {
    // 保存选项
    this.$options = options;
    this.$data = options.data;
    // 响应式处理
    observe(this.$data)
    // 将数据代理到实例上
    proxyData(this, '$data')
    // 用数据和元素进行编译
    new Compiler(options.el, this)
  }
}
// 代理数据的方法
function proxyData (vm, sourceKey) {
  Object.keys(vm[sourceKey]).forEach(key => {
    Object.defineProperty(vm, key, {
      get () {
        return vm[sourceKey][key]
      },
      set (newVal) {
        vm[sourceKey][key] = newVal
      }
    })
  })
}
function observe (obj) {
  if (typeof obj !== 'object' || obj == null) {
    return;
  }
  // 传入境来的对象做响应式处理
  new Observer(obj)
}
function defineReactive (obj, key, val) {
  // 递归劫持数据
  observe(val)
  // 创建与 key 对应的 Dep 管理相关的 Watcher
  const dep = new Dep();
  //对数据进行劫持
  Object.defineProperty(obj, key, {
    get () {
      // 依赖收集
      Dep.target && dep.addDep(Dep.target)
      return val;
    },
    set (newVal) {
      if (newVal !== val) {
        // 如果 newVal 为 Object ,就需要对其响应式处理
        observe(newVal)
        val = newVal;
        // 通知更新
        dep.notify()
      }
    }
  })
}
class Observer {
  constructor(value) {
    this.value = value;
    if (typeof value === 'object') {
      this.walk(value)
    }
  }
  // 对象数据响应化
  walk (obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key])
    })
  }
}
// 观察者，保存更新函数。
class Watcher {
  constructor(vm, key, updateFn) {
    this.vm = vm
    this.key = key
    this.updateFn = updateFn
    Dep.target = this // 在静态属性上保存当前实例
    this.vm[this.key] // 触发数据劫持 get
    Dep.target = null // 在读取属性 触发get后，依赖收集完毕，现在置空
  }
  update () {
    this.updateFn.call(this.vm, this.vm[this.key])
  }
}
// 订阅-发布，管理某个key相关所有Watcher实例
class Dep {
  constructor() {
    this.deps = []
  }
  addDep (dep) {
    this.deps.push(dep)
  }
  notify () {
    this.deps.forEach(dep => dep.update())
  }
}

相关链接

Vue源码解读（预）：手写一个简易版Vue

Vue源码解读（一）：准备工作

Vue源码解读（二）：初始化和挂载

Vue源码解读（三）：响应式原理

Vue源码解读（四）：更新策略

Vue源码解读（五）：render和VNode

Vue源码解读（六）：update和patch

Vue源码解读（七）：模板编译（待续）

如果觉得还凑合的话，给个赞吧！！！也可以来我的个人博客逛逛 https://www.mingme.net/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,843评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,538评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,187评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,264评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,289评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,231评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,116评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,945评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,367评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,458评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,068评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2赞 354

推荐阅读更多精彩内容