别問我[vue]，VNode、elm、context、el是個啥？

vue越來越熟練，但是一些基礎的概念卻漸漸模糊。模糊中又會變得自我懷疑，然後重新梳理，重新認識、深入了解 ~ VNode、elm、context、el ~他們是個啥，擔任着什麼樣子的角色？那就得從指令鈎子函數開始

研究準備階段

vnode源碼位址

/* @flow */
export default class VNode {
  tag: string | void; /** 目前标簽如：div */
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void; /** 存在于VNode中 即div.class名所代表一個Node對象，可直接操作dom */
  ns: string | void;
  context: Component | void; /** 上下文環境，即目前VNode所在的上下文環境。也即是目前VNode的父虛拟節點上下文環境 */
  functionalContext: Component | void; // only for functional component root nodes
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions
  ) {
    /*目前節點的标簽名*/
    this.tag = tag
    /*目前節點對應的對象，包含了具體的一些資料資訊，是一個VNodeData類型，可以參考VNodeData類型中的資料資訊*/
    this.data = data
    /*目前節點的子節點，是一個數組*/
    this.children = children
    /*目前節點的文本*/
    this.text = text
    /*目前虛拟節點對應的真實dom節點*/
    this.elm = elm
    /*目前節點的命名空間*/
    this.ns = undefined
    /*上下文作用域：VueComponent 即我們知道的 this */
    this.context = context
    /*函數化元件作用域*/
    this.functionalContext = undefined
    /*節點的key屬性，被當作節點的标志，用以優化*/
    this.key = data && data.key
    /*元件的option選項*/
    this.componentOptions = componentOptions
    /*目前節點對應的元件的執行個體*/
    this.componentInstance = undefined
    /*目前節點的父節點*/
    this.parent = undefined
    /*簡而言之就是是否為原生HTML或隻是普通文本，innerHTML的時候為true，textContent的時候為false*/
    this.raw = false
    /*靜态節點标志*/
    this.isStatic = false
    /*是否作為根節點插入*/
    this.isRootInsert = true
    /*是否為注釋節點*/
    this.isComment = false
    /*是否為克隆節點*/
    this.isCloned = false
    /*是否有v-once指令*/
    this.isOnce = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  node.text = text
  node.isComment = true
  return node
}

export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}

// optimized shallow clone
// used for static nodes and slot nodes because they may be reused across
// multiple renders, cloning them avoids errors when DOM manipulations rely
// on their elm reference.
export function cloneVNode (vnode: VNode): VNode {
  const cloned = new VNode(
    vnode.tag,
    vnode.data,
    // #7975
    // clone children array to avoid mutating original in case of cloning
    // a child.
    vnode.children && vnode.children.slice(),
    vnode.text,
    vnode.elm,
    vnode.context,
    vnode.componentOptions,
    vnode.asyncFactory
  )
  cloned.ns = vnode.ns
  cloned.isStatic = vnode.isStatic
  cloned.key = vnode.key
  cloned.isComment = vnode.isComment
  cloned.fnContext = vnode.fnContext
  cloned.fnOptions = vnode.fnOptions
  cloned.fnScopeId = vnode.fnScopeId
  cloned.asyncMeta = vnode.asyncMeta
  cloned.isCloned = true
  return cloned
}

上面則展示了VNode源碼，且标注了部分注釋。但即使通讀了上面源碼，也隻是模模糊糊、并不深刻。因為隻有放入項目即使用，才能身臨其境的深刻了解。

接下來，将對

VNode、elm、context、el

相關程式檔案放入項目中，進行窺探 ~

将

element-ui

源碼中的一個js檔案

./package/src/utils/clickoutside.js

放到Vue項目中，并在main.js中進行全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Clickoutside from '@/views/clickoutside';
Vue.use(Clickoutside)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在引入的clickoutside.js檔案中，對關鍵位置作了日志log的列印：

/**
 * package/src/utils/clickoutside.js
 * v-clickoutside
 * @desc 點選元素外面才會觸發的事件
 * @example
 * ```vue
 * <div v-element-clickoutside="handleClose">
 * ```
 */
const clickoutsideContext = '@@clickoutsideContext';

export default {
  bind(el, binding, vnode) {
    const documentHandler = function(e) {
      console.log('directives vnode =>', vnode)
      console.log('directives vnode.context =>', vnode.context)
      console.log('directives e.target =>', e.target)
      console.log('directives vnode.context[el[clickoutsideContext].methodName] =>', vnode.context[el[clickoutsideContext].methodName])
      if (vnode.context && !el.contains(e.target)) {
        vnode.context[el[clickoutsideContext].methodName]();
      }
    };
    console.log('directives el是什麼類型 =>', (typeof el))
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      arg: binding.arg || 'click'
    };
    console.log('directives el =>', el)
    console.log('directives el[clickoutsideContext].methodName =>', el[clickoutsideContext].methodName)
    console.log('directives el[clickoutsideContext].arg =>', el[clickoutsideContext].arg)
    console.log('directives el[clickoutsideContext] =>', el[clickoutsideContext])
    document.addEventListener(el[clickoutsideContext].arg, documentHandler);
  },

  update(el, binding) {
    el[clickoutsideContext].methodName = binding.expression;
  },

  unbind(el) {
    document.removeEventListener(
      el[clickoutsideContext].arg,
      el[clickoutsideContext].documentHandler);
  },

  install(Vue) {
    Vue.directive('clickoutside', {
      bind: this.bind,
      unbind: this.unbind
    });
  }
};

項目中使用看代碼

<templete/>