运行机制

1. 初始化以及挂载
   1. init
      1. 生命周期
      2. props
      3. methods
      4. data
      5. computed
      6. watch
      7. Object.defineProperty 依赖收集
2. compile 编译
   1. parse 正则等方式解析 template 中的指令、class、style 生成 AST
   2. optimize 标记 static 静态节点，update 更新界面时，会有一个 patch 的过程，diff 算法会跳过静态节点，优化 patch 的性能
   3. generate 将 AST 转化成 render function 字符串

3. 响应式

   1. 在 init 的时候通过 Object.defineProperty 进行绑定
   2. 被设置的对象读取的时候会执行 getter 函数、被赋值的时候会执行 setter 函数
   3. 当 render function 被渲染的时候，因为会读取所需要对象的值，会触发 getter 函数进行依赖收集，依赖收集的目的是将观察者 watcher 对象存放在当前闭包中的订阅者 dep 的 subs 中

   4. 修改对象的时候，会触发对应的 watcher 告诉他们自己的值改变了，需要重新渲染视图。watcher 会调用 update 来更新视图 ```javascript function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, // 属性可枚举 configurable: true, // 属性可被修改或删除 get: function reactiveGetter() { return val; },

      set: function reactiveSetter(newVal) { if (val === newVal) return; console.log(‘更新啦’) } }) }

function observe(value) { if (!value || typeof value !== ‘object’) { return; }

object.keys(value).forEach((key) => { defineReactive(value, key, value[key]); }) }

class Vue{ // Vue 构造类 constructor(options) { this._data = options.data; observe(this._data) } }

let o = new Vue({ data: { test: ‘i am test’ } }) o._data.test = ‘hello, world’

<a name="lFtpk"></a>
# 响应式的依赖收集追踪原理
一个全局对象，可能会在多个 vue 对象中用到它进行展示，需要通知多个 vm 进行视图更新。
依赖收集是如何实现的
在 observer 的过程中会注册 get 方法，用来进行依赖收集，在它的闭包中会有一个 dep 对象，这个对象用来存放 watcher 对象的事例，其实依赖收集的过程就是把 watcher 事例存放到对应的  dep 对象中， get 方法可以让当前的 watcher 对象（Dep.target）存放到它的 sub 中（addSub），在数据变化时，set 会调用 Dep 对象的 notify 方法通知它内部所有的 watcher 对象进行视图更新。
```javascript
function defineReactive(obj, key, val) {
  // 一个 dep 类对象
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    enumerable: true,      // 属性可枚举
    configurable: true,    // 属性可被修改或删除
    get: function reactiveGetter() {
      // 将当前 watcher 对象存入 dep 的 subs 中
      dep.addSub(dep.target)
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (val === newVal) return;
      // set 的时候触发 dep 的 notify 来通知所有的 watcher 对象更新视图
      dep.notify();
    }
  })
}
function observe(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
  object.keys(value).forEach((key) => {
    defineReactive(value, key, value[key]);
  })
}
class Vue{
  // Vue 构造类
  constructor(options) {
    this._data = options.data;
    // 新建一个观察者对象，这时候 dep.watcher 会指向这个 watcher 对象
    new Watcher();
    observe(this._data)
  }
}
// 订阅者
class Dep{
  constructor() {
    // 存放 watcher 对象
    this.subs = [];
  }
  // 添加 watcher 对象
  addSub(sub) {
    this.subs.push(sub);
  }
  // 通知 watcher 对象更新视图
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
// 观察者 watcher
class Watcher{
  constructor() {
    // 在 new 一个 watcher 对象时将该对象赋值给 Dep.target，在 get 中会用到
    Dep.target = this;
  }
  // 更新视图的方法
  update() {
    console.log('视图更新啦')
  }
}
Dep.target = null;
// 依赖收集

Virtual Dom

render function 会被转化成 VNode 节点，Virtual DOM 实际上就是一颗以 JavaScript 对象（VNode 节点）作为基础的数，用对象属性来模拟描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上，由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力。

class VNode{
  constructor(tag, data, children, text, elm) {
    this.tag = tag;              // 当前节点的签名
    this.data = data;            // 当前节点一些数据信息，props、attrs
    this.children = children;    // 当前节点的子节点
    this.text = text;            // 当前节点的文本
    this.elm = elm;              // 当前虚拟节点的真实 dom
  }
}

<template>
  <span class="demo" v-show="isShow">
    this is a span
  </span>
</template>

JS 生成的代码

function render(){
  rerurn new VNode(
    'span',
    {
      directives: [
        rawName: 'v-show',
        expression: 'isShow',
        name: 'show',
        value: true
      ],
      staticClass: 'demo'
    },
    [ new VNode(undefined, undefined, undefined, 'this is a span')]
  )
}

生成后的 VNode

{
  tag: 'span',
  data: {
    directives: [
      rawName: 'v-show',
      expression: 'isShow',
      name: 'show',
      value: true
    ],
    staticClass: 'demo'
  },
  text: undefined,
  children: [
    {
      tag: undefined,
      data: undefined,
      text: 'this is a span',
      children: undefined,
    }
  ]
}

template 怎么 compile 编译的

parse

首先是 parse，用正则等方式将 template 模板中进行字符串解析，得到指令、class、style 等数据，形成 AST。

{
  // 标签属性的 map，记录标签上的属性
  'attrMap': {
    ':class': 'c',
    'class': 'demo',
    'v-if': 'isShow'
  }
  // 解析得到的 :class
  'classBinding': 'c',
  // 标签属性 v-if
  'if': 'isShowqa'

}

parseHTML 会用 while 来循环解析 template ，用正则在匹配到标签头、标签尾以及文本的时候分别进行不同的处理。直到整个 template 被解析完毕。

parseStartTag

parseStartTag 函数，用来解析起始标签（”

const startTagMatch = parseStartTag();
const element = {
    type: 1,
    tag: startTagMatch.tagName,
    attrsList: startTagMatch.attrs,
    attrsMap: makeAttrsMap(startTagMatch.attrs),
    parent: currentParent,
    children: []
}

if(!root){
    root = element
}

if(currentParent){
    currentParent.children.push(element);
}

let callbacks = [];
let pending = false;
function nextTick (cb) {
    callbacks.push(cb);
    if (!pending) {
        pending = true;
        setTimeout(flushCallbacks, 0);
    }
}
function flushCallbacks () {
    pending = false;
    const copies = callbacks.slice(0);
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
        copies[i]();
    }
}

function vuexInit () {
    const options = this.$options;
    if (options.store) {
        this.$store = options.store;
    } else {
        this.$store = options.parent.$store;
    }
}

let globalData = {
    d: 'hello world'
};
new Vue({
    data () {
        return {
            ?state: {
                globalData
            }
        }
    }
});
/* modify */
setTimeout(() => {
    globalData.d = 'hi~';
}, 1000);
Vue.prototype.globalData = globalData;

<div>{{globalData.d}}</div>

commit (type, payload, _options) {
    const entry = this._mutations[type];
    entry.forEach(function commitIterator (handler) {
        handler(payload);
    });
}

dispatch (type, payload) {
    const entry = this._actions[type];
    return entry.length > 1
    ? Promise.all(entry.map(handler => handler(payload)))
    : entry[0](payload);
}