淺談vue的第一個commit分析

更新時間：2020年06月08日 16:13:03 作者：沐曉

這篇文章主要介紹了淺談vue的第一個commit分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

為什么寫這篇vue的分析文章？

對于天資愚鈍的前端（我）來說，閱讀源碼是件不容易的事情，畢竟有時候看源碼分析的文章都看不懂。每次看到大佬們用了1～2年的vue就能掌握原理，甚至精通源碼，再看看自己用了好幾年都還在基本的使用階段，心中總是羞愧不已。如果一直滿足于基本的業(yè)務開發(fā)，怕是得在初級水平一直待下去了吧。所以希望在學習源碼的同時記錄知識點，可以讓自己的理解和記憶更加深刻，也方便將來查閱。

目錄結構

本文以vue的第一次 commit a879ec06 作為分析版本

├── build
│  └── build.js        // `rollup` 打包配置
├── dist            
│  └── vue.js  
├── package.json
├── src            // vue源碼目錄
│  ├── compiler        // 將vue-template轉(zhuǎn)化為render函數(shù)
│  │  ├── codegen.js     // 遞歸ast提取指令，分類attr，style，class，并生成render函數(shù)
│  │  ├── html-parser.js   // 通過正則匹配將html字符串轉(zhuǎn)化為ast
│  │  ├── index.js      // compile主入口
│  │  └── text-parser.js   // 編譯{{}}
│  ├── config.js       // 對于vue的全局配置文件
│  ├── index.js        // 主入口
│  ├── index.umd.js      // 未知（應該是umd格式的主入口）
│  ├── instance        // vue實例函數(shù)
│  │  └── index.js      // 包含了vue實例的初始化，compile，data代理，methods代理，watch數(shù)據(jù)，執(zhí)行渲染
│  ├── observer        // 數(shù)據(jù)訂閱發(fā)布的實現(xiàn)
│  │  ├── array.js      // 實現(xiàn)array變異方法，$set $remove 實現(xiàn)
│  │  ├── batcher.js     // watch執(zhí)行隊列的收集，執(zhí)行
│  │  ├── dep.js       // 訂閱中心實現(xiàn)
│  │  ├── index.js      // 數(shù)據(jù)劫持的實現(xiàn)，收集訂閱者
│  │  └── watcher.js     // watch實現(xiàn)，訂閱者
│  ├── util          // 工具函數(shù)
│  │  ├── component.js
│  │  ├── debug.js
│  │  ├── dom.js
│  │  ├── env.js       // nexttick實現(xiàn)
│  │  ├── index.js
│  │  ├── lang.js
│  │  └── options.js
│  └── vdom
│    ├── dom.js       // dom操作的封裝
│    ├── h.js        // 節(jié)點數(shù)據(jù)分析（元素節(jié)點，文本節(jié)點）
│    ├── index.js      // vdom主入口
│    ├── modules      // 不同屬性處理函數(shù)
│    │  ├── attrs.js    // 普通attr屬性處理
│    │  ├── class.js    // class處理
│    │  ├── events.js   // event處理
│    │  ├── props.js    // props處理
│    │  └── style.js    // style處理
│    ├── patch.js      // node樹的渲染，包括節(jié)點的加減更新處理，及對應attr的處理
│    └── vnode.js      // 返回最終的節(jié)點數(shù)據(jù)
└── webpack.config.js     // webpack配置

從template到html的過程分析

我們的代碼是從new Vue()開始的，Vue的構造函數(shù)如下：

constructor (options) {
 // options就是我們對于vue的配置
 this.$options = options
 this._data = options.data
 // 獲取元素html，即template
 const el = this._el = document.querySelector(options.el)
 // 編譯模板 -> render函數(shù)
 const render = compile(getOuterHTML(el))
 this._el.innerHTML = ''
 // 實例代理data數(shù)據(jù)
 Object.keys(options.data).forEach(key => this._proxy(key))
 // 將method的this指向?qū)嵗?
 if (options.methods) {
  Object.keys(options.methods).forEach(key => {
   this[key] = options.methods[key].bind(this)
  })
 }
 // 數(shù)據(jù)觀察
 this._ob = observe(options.data)
 this._watchers = []
 // watch數(shù)據(jù)及更新
 this._watcher = new Watcher(this, render, this._update)
 // 渲染函數(shù)
 this._update(this._watcher.value)
}

當我們初始化項目的時候，即會執(zhí)行構造函數(shù)，該函數(shù)向我們展示了vue初始化的主線：編譯template字符串 => 代理data數(shù)據(jù)/methods的this綁定 => 數(shù)據(jù)觀察 => 建立watch及更新渲染

1. 編譯template字符串

const render = compile(getOuterHTML(el))

其中compile的實現(xiàn)如下：

export function compile (html) {
 html = html.trim()
 // 對編譯結果緩存
 const hit = cache[html]
 // parse函數(shù)在parse-html中定義，其作用是把我們獲取的html字符串通過正則匹配轉(zhuǎn)化為ast，輸出如下 {tag: 'div', attrs: {}, children: []}
 return hit || (cache[html] = generate(parse(html)))
}

接下來看看generate函數(shù)，ast通過genElement的轉(zhuǎn)化生成了構建節(jié)點html的函數(shù)，在genElement將對if for 等進行判斷并轉(zhuǎn)化( 指令的具體處理將在后面做分析，先關注主流程代碼)，最后都會執(zhí)行genData函數(shù)

// 生成節(jié)點主函數(shù)
export function generate (ast) {
 const code = genElement(ast)
 // 執(zhí)行code代碼，并將this作為code的global對象。所以我們在template中的變量將指向為實例的屬性 {{name}} -> this.name 
 return new Function (`with (this) { return $[code]}`)
}

// 解析單個節(jié)點 -> genData
function genElement (el, key) {
 let exp
 // 指令的實現(xiàn)，實際就是在模板編譯時實現(xiàn)的
 if (exp = getAttr(el, 'v-for')) {
  return genFor(el, exp)
 } else if (exp = getAttr(el, 'v-if')) {
  return genIf(el, exp)
 } else if (el.tag === 'template') {
  return genChildren(el)
 } else {
  // 分別為 tag 自身屬性 子節(jié)點數(shù)據(jù)
  return `__h__('${ el.tag }', ${ genData(el, key) }, ${ genChildren(el) })`
 }
}

我們可以看看在genData中都做了什么。上面的parse函數(shù)將html字符串轉(zhuǎn)化為ast，而在genData中則將節(jié)點的attrs數(shù)據(jù)進一步處理，例如class -> renderClass style class props attr 分類。在這里可以看到 bind 指令的實現(xiàn)，即通過正則匹配 : 和 bind，如果匹配則把相應的 value值轉(zhuǎn)化為 (value)的形式，而不匹配的則通過JSON.stringify()轉(zhuǎn)化為字符串（'value'）。最后輸出attrs的（key-value），在這里得到的對象是字符串形式的，例如（value）等也僅僅是將變量名，而在generate中通過new Function進一步通過（this.value）得到變量值。

function genData (el, key) {
 // 沒有屬性返回空對象
 if (!el.attrs.length) {
  return '{}'
 }
 // key
 let data = key ? `{key:${ key },` : `{`
 // class處理
 if (el.attrsMap[':class'] || el.attrsMap['class']) {
  data += `class: _renderClass(${ el.attrsMap[':class'] }, "${ el.attrsMap['class'] || '' }"),`
 }
 // attrs
 let attrs = `attrs:{`
 let props = `props:{`
 let hasAttrs = false
 let hasProps = false
 for (let i = 0, l = el.attrs.length; i < l; i++) {
  let attr = el.attrs[i]
  let name = attr.name
  // bind屬性
  if (bindRE.test(name)) {
   name = name.replace(bindRE, '')
   if (name === 'class') {
    continue
   // style處理
   } else if (name === 'style') {
    data += `style: ${ attr.value },`
   // props屬性處理
   } else if (mustUsePropsRE.test(name)) {
    hasProps = true
    props += `"${ name }": (${ attr.value }),` 
   // 其他屬性
   } else {
    hasAttrs = true
    attrs += `"${ name }": (${ attr.value }),`
   }
  // on指令，未實現(xiàn)
  } else if (onRE.test(name)) {
   name = name.replace(onRE, '')
  // 普通屬性
  } else if (name !== 'class') {
   hasAttrs = true
   attrs += `"${ name }": (${ JSON.stringify(attr.value) }),`
  }
 }
 if (hasAttrs) {
  data += attrs.slice(0, -1) + '},'
 }
 if (hasProps) {
  data += props.slice(0, -1) + '},'
 }
 return data.replace(/,$/, '') + '}'
}

而對于genChildren，我們可以猜到就是對ast中的children進行遍歷調(diào)用genElement，實際上在這里還包括了對文本節(jié)點的處理。

// 遍歷子節(jié)點 -> genNode
function genChildren (el) {
 if (!el.children.length) {
  return 'undefined'
 }
 // 對children扁平化處理
 return '__flatten__([' + el.children.map(genNode).join(',') + '])'
}

function genNode (node) {
 if (node.tag) {
  return genElement(node)
 } else {
  return genText(node)
 }
}

// 解析{{}}
function genText (text) {
 if (text === ' ') {
  return '" "'
 } else {
  const exp = parseText(text)
  if (exp) {
   return 'String(' + escapeNewlines(exp) + ')'
  } else {
   return escapeNewlines(JSON.stringify(text))
  }
 }
}

genText處理了text及換行，在parseText函數(shù)中利用正則解析{{}}，輸出字符串(value)形式的字符串。

現(xiàn)在我們再看看__h__('${ el.tag }', ${ genData(el, key) }, ${ genChildren(el) })中__h__函數(shù)

// h 函數(shù)利用上面得到的節(jié)點數(shù)據(jù)得到 vNode對象 => 虛擬dom
export default function h (tag, b, c) {
 var data = {}, children, text, i
 if (arguments.length === 3) {
  data = b
  if (isArray(c)) { children = c }
  else if (isPrimitive(c)) { text = c }
 } else if (arguments.length === 2) {
  if (isArray(b)) { children = b }
  else if (isPrimitive(b)) { text = b }
  else { data = b }
 }
 if (isArray(children)) {
  // 子節(jié)點遞歸處理
  for (i = 0; i < children.length; ++i) {
   if (isPrimitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i])
  }
 }
 // svg處理
 if (tag === 'svg') {
  addNS(data, children)
 }
 // 子節(jié)點為文本節(jié)點
 return VNode(tag, data, children, text, undefined)
}

到此為止，我們分析了const render = compile(getOuterHTML(el))，從el的html字符串到render函數(shù)都是怎么處理的。

2. 代理data數(shù)據(jù)/methods的this綁定

// 實例代理data數(shù)據(jù)
Object.keys(options.data).forEach(key => this._proxy(key))
// 將method的this指向?qū)嵗?
if (options.methods) {
 Object.keys(options.methods).forEach(key => {
  this[key] = options.methods[key].bind(this)
 })
}

實例代理data數(shù)據(jù)的實現(xiàn)比較簡單，就是利用了對象的setter和getter，讀取this數(shù)據(jù)時返回data數(shù)據(jù)，在設置this數(shù)據(jù)時同步設置data數(shù)據(jù)

_proxy (key) {
 if (!isReserved(key)) {
  // need to store ref to self here
  // because these getter/setters might
  // be called by child scopes via
  // prototype inheritance.
  var self = this
  Object.defineProperty(self, key, {
   configurable: true,
   enumerable: true,
   get: function proxyGetter () {
    return self._data[key]
   },
   set: function proxySetter (val) {
    self._data[key] = val
   }
  })
 }
}

3. Obaerve的實現(xiàn)

Observe的實現(xiàn)原理在很多地方都有分析，主要是利用了Object.defineProperty()來建立對數(shù)據(jù)更改的訂閱，在很多地方也稱之為數(shù)據(jù)劫持。下面我們來學習從零開始建立這樣一個數(shù)據(jù)的訂閱發(fā)布體系。

從簡單處開始，我們希望有個函數(shù)可以幫我們監(jiān)聽數(shù)據(jù)的改變，每當數(shù)據(jù)改變時執(zhí)行特定回調(diào)函數(shù)

function observe(data, callback) {
 if (!data || typeof data !== 'object') {
  return
 }

 // 遍歷key
 Object.keys(data).forEach((key) => {
  let value = data[key];

  // 遞歸遍歷監(jiān)聽深度變化
  observe(value, callback);

  // 監(jiān)聽單個可以的變化
  Object.defineProperty(data, key, {
   configurable: true,
   enumerable: true,
   get() {
    return value;
   },
   set(val) {
    if (val === value) {
     return
    }

    value = val;

    // 監(jiān)聽新的數(shù)據(jù)
    observe(value, callback);
    
    // 數(shù)據(jù)改變的回調(diào)
    callback();
   }
  });
 });
}

// 使用observe函數(shù)監(jiān)聽data
const data = {};
observe(data, () => {
 console.log('data修改');
})

上面我們實現(xiàn)了一個簡單的observe函數(shù)，只要我們將編譯函數(shù)作為callback傳入，那么每次數(shù)據(jù)更改時都會觸發(fā)回調(diào)函數(shù)。但是我們現(xiàn)在不能為單獨的key設置監(jiān)聽及回調(diào)函數(shù)，只能監(jiān)聽整個對象的變化執(zhí)行回調(diào)。下面我們對函數(shù)進行改進，達到為某個key設置監(jiān)聽及回調(diào)。同時建立調(diào)度中心，讓整個訂閱發(fā)布模式更加清晰。

// 首先是訂閱中心
class Dep {
 constructor() {
  this.subs = []; // 訂閱者數(shù)組
 }

 addSub(sub) {
  // 添加訂閱者
  this.subs.push(sub);
 }

 notify() {
  // 發(fā)布通知
  this.subs.forEach((sub) => {
   sub.update();
  });
 }
}

// 當前訂閱者，在getter中標記
Dep.target = null;

// 訂閱者
class Watch {
 constructor(express, cb) {
  this.cb = cb;
  if (typeof express === 'function') {
   this.expressFn = express;
  } else {
   this.expressFn = () => {
    return new Function(express)();
   }
  }
  
  this.get();
 }

 get() {
  // 利用Dep.target存當前訂閱者
  Dep.target = this;
  // 執(zhí)行表達式 -> 觸發(fā)getter -> 在getter中添加訂閱者
  this.expressFn();
  // 及時置空
  Dep.taget = null;
 }

 update() {
  // 更新
  this.cb();
 }

 addDep(dep) {
  // 添加訂閱
  dep.addSub(this);
 }
}

// 觀察者 建立觀察
class Observe {
 constructor(data) {
  if (!data || typeof data !== 'object') {
   return
  }
 
  // 遍歷key
  Object.keys(data).forEach((key) => {
   // key => dep 對應
   const dep = new Dep();
   let value = data[key];
 
   // 遞歸遍歷監(jiān)聽深度變化
   const observe = new Observe(value);
 
   // 監(jiān)聽單個可以的變化
   Object.defineProperty(data, key, {
    configurable: true,
    enumerable: true,
    get() {
     if (Dep.target) {
      const watch = Dep.target;
      watch.addDep(dep);
     }
     return value;
    },
    set(val) {
     if (val === value) {
      return
     }
 
     value = val;
 
     // 監(jiān)聽新的數(shù)據(jù)
     new Observe(value);
     
     // 數(shù)據(jù)改變的回調(diào)
     dep.notify();
    }
   });
  });
 }
}

// 監(jiān)聽數(shù)據(jù)中某個key的更改
const data = {
 name: 'xiaoming',
 age: 26
};

const observe = new Observe(data);

const watch = new Watch('data.age', () => {
 console.log('age update');
});

data.age = 22

現(xiàn)在我們實現(xiàn)了訂閱中心，訂閱者，觀察者。觀察者監(jiān)測數(shù)據(jù)的更新，訂閱者通過訂閱中心訂閱數(shù)據(jù)的更新，當數(shù)據(jù)更新時，觀察者會告訴訂閱中心，訂閱中心再逐個通知所有的訂閱者執(zhí)行更新函數(shù)。到現(xiàn)在為止，我們可以大概猜出vue的實現(xiàn)原理：

建立觀察者觀察data數(shù)據(jù)的更改（new Observe）
在編譯的時候，當某個代碼片段或節(jié)點依賴data數(shù)據(jù)，為該節(jié)點建議訂閱者，訂閱data中某些數(shù)據(jù)的更新（new Watch）
當dada數(shù)據(jù)更新時，通過訂閱中心通知數(shù)據(jù)更新，執(zhí)行節(jié)點更新函數(shù)，新建或更新節(jié)點（dep.notify()）

上面是我們對vue實現(xiàn)原理訂閱發(fā)布模式的基本實現(xiàn)，及編譯到更新過程的猜想，現(xiàn)在我們接著分析vue源碼的實現(xiàn):
在實例的初始化中

// ...
// 為數(shù)據(jù)建立數(shù)據(jù)觀察
this._ob = observe(options.data)
this._watchers = []
// 添加訂閱者 執(zhí)行render 會觸發(fā) getter 訂閱者訂閱更新，數(shù)據(jù)改變觸發(fā) setter 訂閱中心通知訂閱者執(zhí)行 update
this._watcher = new Watcher(this, render, this._update)
// ...

vue中數(shù)據(jù)觀察的實現(xiàn)

// observe函數(shù)
export function observe (value, vm) {
 if (!value || typeof value !== 'object') {
  return
 }
 if (
  hasOwn(value, '__ob__') &&
  value.__ob__ instanceof Observer
 ) {
  ob = value.__ob__
 } else if (
  shouldConvert &&
  (isArray(value) || isPlainObject(value)) &&
  Object.isExtensible(value) &&
  !value._isVue
 ) {
  // 為數(shù)據(jù)建立觀察者
  ob = new Observer(value)
 }
 // 存儲關聯(lián)的vm
 if (ob && vm) {
  ob.addVm(vm)
 }
 return ob
}

// => Observe 函數(shù)
export function Observer (value) {
 this.value = value
 // 在數(shù)組變異方法中有用
 this.dep = new Dep()
 // observer實例存在__ob__中
 def(value, '__ob__', this)
 if (isArray(value)) {
  var augment = hasProto
   ? protoAugment
   : copyAugment
  // 數(shù)組遍歷，添加變異的數(shù)組方法
  augment(value, arrayMethods, arrayKeys)
  // 對數(shù)組的每個選項調(diào)用observe函數(shù)
  this.observeArray(value)
 } else {
  // walk -> convert -> defineReactive -> setter/getter
  this.walk(value)
 }
}

// => walk
Observer.prototype.walk = function (obj) {
 var keys = Object.keys(obj)
 for (var i = 0, l = keys.length; i < l; i++) {
  this.convert(keys[i], obj[keys[i]])
 }
}

// => convert
Observer.prototype.convert = function (key, val) {
 defineReactive(this.value, key, val)
}

// 重點看看defineReactive
export function defineReactive (obj, key, val) {
 // key對應的的訂閱中心
 var dep = new Dep()

 var property = Object.getOwnPropertyDescriptor(obj, key)
 if (property && property.configurable === false) {
  return
 }

 // 兼容原有setter/getter
 // cater for pre-defined getter/setters
 var getter = property && property.get
 var setter = property && property.set

 // 實現(xiàn)遞歸監(jiān)聽屬性 val = obj[key]
 // 深度優(yōu)先遍歷 先為子屬性設置 reactive
 var childOb = observe(val)
 // 設置 getter/setter
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   var value = getter ? getter.call(obj) : val
   // Dep.target 為當前 watch 實例
   if (Dep.target) {
    // dep 為 obj[key] 對應的調(diào)度中心 dep.depend 將當前 wtcher 實例添加到調(diào)度中心
    dep.depend()
    if (childOb) {
     // childOb.dep 為 obj[key] 值 val 對應的 observer 實例的 dep
     // 實現(xiàn)array的變異方法和$set方法訂閱
     childOb.dep.depend()
    }

    // TODO: 此處作用未知？
    if (isArray(value)) {
     for (var e, i = 0, l = value.length; i < l; i++) {
      e = value[i]
      e && e.__ob__ && e.__ob__.dep.depend()
     }
    }
   }
   return value
  },
  set: function reactiveSetter (newVal) {
   var value = getter ? getter.call(obj) : val
   // 通過 getter 獲取 val 判斷是否改變
   if (newVal === value) {
    return
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   // 為新值設置 reactive
   childOb = observe(newVal)
   // 通知key對應的訂閱中心更新
   dep.notify()
  }
 })
}

訂閱中心的實現(xiàn)

let uid = 0

export default function Dep () {
 this.id = uid++
 // 訂閱調(diào)度中心的watch數(shù)組
 this.subs = []
}

// 當前watch實例
Dep.target = null

// 添加訂閱者
Dep.prototype.addSub = function (sub) {
 this.subs.push(sub)
}

// 移除訂閱者
Dep.prototype.removeSub = function (sub) {
 this.subs.$remove(sub)
}

// 訂閱
Dep.prototype.depend = function () {
 // Dep.target.addDep(this) => this.addSub(Dep.target) => this.subs.push(Dep.target)
 Dep.target.addDep(this)
}

// 通知更新
Dep.prototype.notify = function () {
 // stablize the subscriber list first
 var subs = this.subs.slice()
 for (var i = 0, l = subs.length; i < l; i++) {
  // subs[i].update() => watch.update()
  subs[i].update()
 }
}

訂閱者的實現(xiàn)

export default function Watcher (vm, expOrFn, cb, options) {
 // mix in options
 if (options) {
  extend(this, options)
 }
 var isFn = typeof expOrFn === 'function'
 this.vm = vm
 // vm 的 _watchers 包含了所有 watch
 vm._watchers.push(this)
 this.expression = expOrFn
 this.cb = cb
 this.id = ++uid // uid for batching
 this.active = true
 this.dirty = this.lazy // for lazy watchers
 // deps 一個 watch 實例可以對應多個 dep
 this.deps = []
 this.newDeps = []
 this.depIds = Object.create(null)
 this.newDepIds = null
 this.prevError = null // for async error stacks
 // parse expression for getter/setter
 if (isFn) {
  this.getter = expOrFn
  this.setter = undefined
 } else {
  warn('vue-lite only supports watching functions.')
 }
 this.value = this.lazy
  ? undefined
  : this.get()
 this.queued = this.shallow = false
}

Watcher.prototype.get = function () {
 this.beforeGet()
 var scope = this.scope || this.vm
 var value
 try {
  // 執(zhí)行 expOrFn，此時會觸發(fā) getter => dep.depend() 將watch實例添加到對應 obj[key] 的 dep
  value = this.getter.call(scope, scope)
 }
 if (this.deep) {
  // 深度watch
  // 觸發(fā)每個key的getter watch實例將對應多個dep
  traverse(value)
 }
 // ...
 this.afterGet()
 return value
}

// 觸發(fā)getter，實現(xiàn)訂閱
Watcher.prototype.beforeGet = function () {
 Dep.target = this
 this.newDepIds = Object.create(null)
 this.newDeps.length = 0
}

// 添加訂閱
Watcher.prototype.addDep = function (dep) {
 var id = dep.id
 if (!this.newDepIds[id]) {
  // 將新出現(xiàn)的dep添加到newDeps中
  this.newDepIds[id] = true
  this.newDeps.push(dep)
  // 如果已在調(diào)度中心，不再重復添加
  if (!this.depIds[id]) {
   // 將watch添加到調(diào)度中心的數(shù)組中
   dep.addSub(this)
  }
 }
}

Watcher.prototype.afterGet = function () {
 // 切除key的getter聯(lián)系
 Dep.target = null
 var i = this.deps.length
 while (i--) {
  var dep = this.deps[i]
  if (!this.newDepIds[dep.id]) {
   // 移除不在expOrFn表達式中關聯(lián)的dep中watch的訂閱
   dep.removeSub(this)
  }
 }
 this.depIds = this.newDepIds
 var tmp = this.deps
 this.deps = this.newDeps
 // TODO: 既然newDeps最終會被置空，這邊賦值的意義在于?
 this.newDeps = tmp
}

// 訂閱中心通知消息更新
Watcher.prototype.update = function (shallow) {
 if (this.lazy) {
  this.dirty = true
 } else if (this.sync || !config.async) {
  this.run()
 } else {
  // if queued, only overwrite shallow with non-shallow,
  // but not the other way around.
  this.shallow = this.queued
   ? shallow
    ? this.shallow
    : false
   : !!shallow
  this.queued = true
  // record before-push error stack in debug mode
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.debug) {
   this.prevError = new Error('[vue] async stack trace')
  }
  // 添加到待執(zhí)行池
  pushWatcher(this)
 }
}

// 執(zhí)行更新回調(diào)
Watcher.prototype.run = function () {
 if (this.active) {
  var value = this.get()
  if (
   ((isObject(value) || this.deep) && !this.shallow)
  ) {
   // set new value
   var oldValue = this.value
   this.value = value
   var prevError = this.prevError
   // ...
   this.cb.call(this.vm, value, oldValue)
  }
  this.queued = this.shallow = false
 }
}

Watcher.prototype.depend = function () {
 var i = this.deps.length
 while (i--) {
  this.deps[i].depend()
 }
}

wtach回調(diào)執(zhí)行隊列

在上面我們可以發(fā)現(xiàn)，watch在收到信息更新執(zhí)行update時。如果非同步情況下會執(zhí)行pushWatcher(this)將實例推入執(zhí)行池中，那么在何時會執(zhí)行回調(diào)函數(shù)，如何執(zhí)行呢？我們一起看看pushWatcher的實現(xiàn)。

// batch.js
var queueIndex
var queue = []
var userQueue = []
var has = {}
var circular = {}
var waiting = false
var internalQueueDepleted = false

// 重置執(zhí)行池
function resetBatcherState () {
 queue = []
 userQueue = []
 // has 避免重復
 has = {}
 circular = {}
 waiting = internalQueueDepleted = false
}

// 執(zhí)行執(zhí)行隊列
function flushBatcherQueue () {
 runBatcherQueue(queue)
 internalQueueDepleted = true
 runBatcherQueue(userQueue)
 resetBatcherState()
}

// 批量執(zhí)行
function runBatcherQueue (queue) {
 for (queueIndex = 0; queueIndex < queue.length; queueIndex++) {
  var watcher = queue[queueIndex]
  var id = watcher.id
  // 執(zhí)行后置為null
  has[id] = null
  watcher.run()
  // in dev build, check and stop circular updates.
  if (process.env.NODE_ENV !== 'production' && has[id] != null) {
   circular[id] = (circular[id] || 0) + 1
   if (circular[id] > config._maxUpdateCount) {
    warn(
     'You may have an infinite update loop for watcher ' +
     'with expression "' + watcher.expression + '"',
     watcher.vm
    )
    break
   }
  }
 }
}

// 添加到執(zhí)行池
export function pushWatcher (watcher) {
 var id = watcher.id
 if (has[id] == null) {
  if (internalQueueDepleted && !watcher.user) {
   // an internal watcher triggered by a user watcher...
   // let's run it immediately after current user watcher is done.
   userQueue.splice(queueIndex + 1, 0, watcher)
  } else {
   // push watcher into appropriate queue
   var q = watcher.user
    ? userQueue
    : queue
   has[id] = q.length
   q.push(watcher)
   // queue the flush
   if (!waiting) {
    waiting = true
    // 在nextick中執(zhí)行
    nextTick(flushBatcherQueue)
   }
  }
 }
}

4. patch實現(xiàn)

上面便是vue中數(shù)據(jù)驅(qū)動的實現(xiàn)原理，下面我們接著回到主流程中，在執(zhí)行完watch后，便執(zhí)行this._update(this._watcher.value)開始節(jié)點渲染

// _update => createPatchFunction => patch => patchVnode => (dom api)

// vtree是通過compile函數(shù)編譯的render函數(shù)執(zhí)行的結果，返回了當前表示當前dom結構的對象（虛擬節(jié)點樹）
_update (vtree) {
 if (!this._tree) {
  // 第一次渲染
  patch(this._el, vtree)
 } else {
  patch(this._tree, vtree)
 }
 this._tree = vtree
}

// 在處理節(jié)點時，需要針對class，props，style，attrs，events做不同處理
// 在這里注入針對不同屬性的處理函數(shù)
const patch = createPatchFunction([
 _class, // makes it easy to toggle classes
 props,
 style,
 attrs,
 events
])

// => createPatchFunction返回patch函數(shù)，patch函數(shù)通過對比虛擬節(jié)點的差異，對節(jié)點進行增刪更新
// 最后調(diào)用原生的dom api更新html
return function patch (oldVnode, vnode) {
 var i, elm, parent
 var insertedVnodeQueue = []
 // pre hook
 for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()

 if (isUndef(oldVnode.sel)) {
  oldVnode = emptyNodeAt(oldVnode)
 }

 if (sameVnode(oldVnode, vnode)) {
  // someNode can patch
  patchVnode(oldVnode, vnode, insertedVnodeQueue)
 } else {
  // 正常的不復用 remove insert
  elm = oldVnode.elm
  parent = api.parentNode(elm)

  createElm(vnode, insertedVnodeQueue)

  if (parent !== null) {
   api.insertBefore(parent, vnode.elm, api.nextSibling(elm))
   removeVnodes(parent, [oldVnode], 0, 0)
  }
 }

 for (i = 0; i < insertedVnodeQueue.length; ++i) {
  insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i])
 }

 // hook post
 for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()
 return vnode
}

結尾

以上分析了vue從template 到節(jié)點渲染的大致實現(xiàn)，當然也有某些地方?jīng)]有全面分析的地方，其中template解析為ast主要通過正則匹配實現(xiàn)，及節(jié)點渲染及更新的patch過程主要通過節(jié)點操作對比來實現(xiàn)。但是我們對編譯template字符串 => 代理data數(shù)據(jù)/methods的this綁定 => 數(shù)據(jù)觀察 => 建立watch及更新渲染的大致流程有了個比較完整的認知。

到此這篇關于淺談vue的第一個commit分析的文章就介紹到這了,更多相關vue commit內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
commit

Vue Element前端應用開發(fā)之動態(tài)菜單和路由的關聯(lián)處理
這篇文章主要介紹了Vue Element前端應用開發(fā)之動態(tài)菜單和路由的關聯(lián)處理，對vue感興趣的同學，可以參考下
2021-05-05
詳解Vue3框架的搭建及工程目錄
文章介紹了如何使用Node.js搭建Vue工程,并對Vue工程目錄進行了詳細解讀,包括各種文件夾和文件的作用,此外,還講解了如何設置網(wǎng)頁標題和全局樣式,以及如何配置路由,感興趣的朋友一起看看吧
2025-03-03
vue實現(xiàn)簡易計算器功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例
這篇文章主要介紹了Vue實現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
react+?ts?vite搭建及二次封裝請求的過程解析
這篇文章主要介紹了react+?ts?vite搭建及二次封裝請求，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
詳解基于vue-cli3快速發(fā)布一個fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個fullpage組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
Vue使用exceljs導出excel文件的詳細教程
這篇文章主要為大家詳細介紹了Vue如何使用exceljs導出excel文件的詳細教程,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-03-03
Vue 換膚的示例實踐
本篇文章主要介紹了Vue 換膚的示例實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01