Vue源碼解析(3)-AST到VNode過(guò)程

Rainie 發(fā)布于2019-08-23 11:44 / 1703人閱讀

摘要：模版如下我是選項(xiàng)模板為我是選項(xiàng)模板對(duì)應(yīng)我是選項(xiàng)模板為對(duì)應(yīng)的為下把等方法掛載到原型上這樣就是執(zhí)行就是執(zhí)行就是執(zhí)行在下標(biāo)簽關(guān)于這個(gè)節(jié)點(diǎn)的值，包括等子節(jié)點(diǎn)實(shí)例對(duì)象創(chuàng)建對(duì)象關(guān)于這個(gè)節(jié)點(diǎn)的值，包括等子節(jié)點(diǎn)文本內(nèi)容真實(shí)的節(jié)點(diǎn)創(chuàng)建這個(gè)的上下文下面分別

模版如下


      我是選項(xiàng)模板3
      {{number}}
      {{message}}
      
        
          1
          11  
          12  
        
        2
        3
        4
        5

options.render為

function anonymous( ) { 
    with(this){
      return _c(
        "div",
        [_c("h1",{staticStyle:{"color":"red"}},[_v("我是選項(xiàng)模板3")])
        ,_v(" "),_c("p",[_v(_s(number))]),
        _v(" "),
        _c("p",[_v(_s(message))]),
        _v(" "),
        _m(0)]
        )
    } 
  }

對(duì)應(yīng)

 我是選項(xiàng)模板3
  {{number}}
  {{message}}

options.staticRenderFns為 [0]

 function anonymous() {
   with(this){
     return _c("div",[
              _c("div",[_v("
          1
          "),
                _c("div",[_v("11")]),_v(" "),
                _c("div",[_v("12")])
              ]),_v(" "),
              _c("div",[_v("2")]),_v(" "),
              _c("div",[_v("3")]),_v(" "),
              _c("div",[_v("4")]),_v(" "),
              _c("div",[_v("5")])
            ])
    }
  }

對(duì)應(yīng)的template為

render-helpers 下 index.js

export function installRenderHelpers (target) {
  target._o = markOnce
  target._n = toNumber
  target._s = toString
  target._l = renderList
  target._t = renderSlot
  target._q = looseEqual
  target._i = looseIndexOf
  target._m = renderStatic
  target._f = resolveFilter
  target._k = checkKeyCodes
  target._b = bindObjectProps
  target._v = createTextVNode
  target._e = createEmptyVNode
  target._u = resolveScopedSlots
  target._g = bindObjectListeners
}

render.js

function renderMixin (Vue) {
   //把_v,_m等方法掛載到vue原型上
 installRenderHelpers(Vue.prototype)
}
function initRender (vm) {
 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
}

這樣this._c就是執(zhí)行createElement
this._m就是執(zhí)行renderStatic
_v就是執(zhí)行createTextVNode

在vdom下create-element.js

tag  // 標(biāo)簽
data    // 關(guān)于這個(gè)節(jié)點(diǎn)的data值，包括attrs,style,hook等
children  // 子vdom節(jié)點(diǎn)
context  // vue實(shí)例對(duì)象
function _createElement(context,tag,data,children,normalizationType) {
  vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
  )
 return vnode
}

創(chuàng)建vdom對(duì)象

vnode

class VNode {
    constructor (
    tag,
    data,     // 關(guān)于這個(gè)節(jié)點(diǎn)的data值，包括attrs,style,hook等
    children, // 子vdom節(jié)點(diǎn)
    text,     // 文本內(nèi)容
    elm,      // 真實(shí)的dom節(jié)點(diǎn)
    context,  // 創(chuàng)建這個(gè)vdom的上下文
    componentOptions,
    asyncFactory
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }
}

下面dom分別依次執(zhí)行,先渲染里面然后再渲染外層

1.   [_c("h1",{staticStyle:{"color":"red"}},[_v("我是選項(xiàng)模板3")])
  我是選項(xiàng)模板3
2._c("p",[_v(_s(number))]
 {{number}}
3._c("p",[_v(_s(message))])
{{message}}
4._m(0)是緩存渲染數(shù)
function anonymous() {
   with(this){
     return _c("div",[
              _c("div",[_v("
          1
          "),
                _c("div",[_v("11")]),_v(" "),
                _c("div",[_v("12")])
              ]),_v(" "),
              _c("div",[_v("2")]),_v(" "),
              _c("div",[_v("3")]),_v(" "),
              _c("div",[_v("4")]),_v(" "),
              _c("div",[_v("5")])
            ])
    }
  }

vdom順序依次為
(1)11  
(2)12 
(3) 
     1
     11  
     12  
   
(4)2
(5)3
(6)4
(7)5
(8)
     
      1
      11  
      12  
    
    2
    3
    4
    5
  
(9)
  我是選項(xiàng)模板3
  {{number}}
  {{message}}
  
     
      1
      11  
      12  
    
    2
    3
    4
    5

最后一次執(zhí)行最外面的

render-static.js給m[0]靜態(tài)樹(shù)做了緩存處理

renderStatic (
  index,
  isInFor
) {
//緩存處理
 const cached = this._staticTrees || (this._staticTrees = [])
// staticRenderFns被執(zhí)行
tree = cached[index] = this.$options.staticRenderFns[index].call(
    this._renderProxy, // 代理可以理解為vue實(shí)例對(duì)象,多了一些提示處理
    null,
    this // for render fns generated for functional component templates
)
markStatic(tree, `__static__${index}`, false)
return tree
}

function markStatic (
  tree,
  key,
  isOnce
) {
function markStaticNode (node, key, isOnce) {
  node.isStatic = true  //靜態(tài)樹(shù)為true
  node.key = key  // `__static__${index}` 標(biāo)志
  node.isOnce = isOnce // 是否是v-once
}
markStaticNode(node, key, isOnce)
}

然后又重新執(zhí)行

function anonymous(
) {
with(this){return _c("div",[_c("div",[_v("
          1
          "),_c("div",[_v("11")]),_v(" "),_c("div",[_v("12")])]),_v(" "),_c("div",[_v("2")]),_v(" "),_c("div",[_v("3")]),_v(" "),_c("div",[_v("4")]),_v(" "),_c("div",[_v("5")])])}
}

打印render()結(jié)果
靜態(tài)樹(shù)有了isStatic和key值

補(bǔ)充個(gè)小問(wèn)題 render函數(shù)里number 還是變量是什么時(shí)候變成數(shù)字的
因?yàn)閒unction有個(gè)with(this){}改變了作用域,當(dāng)this.render()執(zhí)行時(shí)候,那么this就是指得vue, $options.data 已經(jīng)通過(guò)defineProperty代理到了vue下,訪問(wèn)this.data就是訪問(wèn)$options.data 所以number就是數(shù)字啦