vue VNode如何使用，是什么東西？

前言：element ui 中有些 demo 使用了 vue 的 VNode，但是 demo 畢竟不全，所以想要了解 VNode 到底是什么，如何寫出符合自己業務的代碼。

vue 官網介紹：渲染函數 & JSX

createElement 函數

　　這里涉及到 createElement 函數。這個函數的返回值就是一個 VNode 對象。

　　createElement 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更准確的名字可能是 createNodeDescription，因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節點，及其子節點。我們把這樣的節點描述為“虛擬節點 (Virtual Node)”，也常簡寫它為“VNode”。“虛擬 DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

VNode

　　虛擬 DOM。Vue 通過建立一個虛擬 DOM 對真實 DOM 發生的變化保持追蹤。

通過 createElement 函數來創建自定義的 VNode

　　使用 JSX 語法。

　　接下來你需要熟悉的是如何在 createElement 函數中生成模板。這里是 createElement 接受的參數：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標簽字符串，組件選項對象，或者
  // 解析上述任何一種的一個 async 異步函數。必需參數。
  'div',

  // {Object}
  // 一個包含模板相關屬性的數據對象
  // 你可以在 template 中使用這些特性。可選參數。
  {
    // (詳情見下一節)
  },

  // {String | Array}
  // 子虛擬節點 (VNodes)，由 `createElement()` 構建而成，
  // 也可以使用字符串來生成“文本虛擬節點”。可選參數。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

數據對象如何寫？（如怎么添加點擊事件等）

　　在 VNode 數據對象中，下列屬性名是級別最高的字段。該對象也允許你綁定普通的 HTML 特性，就像 DOM 屬性一樣，比如 innerHTML (這會取代 v-html 指令)。

{
  // 和`v-bind:class`一樣的 API
  // 接收一個字符串、對象或字符串和對象組成的數組
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一樣的 API
  // 接收一個字符串、對象或對象組成的數組
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 組件 props
  props: {
    myProp: 'bar'
  },
  // DOM 屬性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件監聽器基於 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修飾器
  // 需要手動匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅用於組件，用於監聽原生事件，而不是組件內部使用
  // `vm.$emit` 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
  // 賦值，因為 Vue 已經自動為你進行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果組件是其他組件的子組件，需為插槽指定名稱
  slot: 'name-of-slot',
  // 其他特殊頂層屬性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函數中向多個元素都應用了相同的 ref 名，
  // 那么 `$refs.myRef` 會變成一個數組。
  refInFor: true
}

使用舉例

element ui 的Notification通知如何加 a 標簽和按鈕，並彈多個