前言

如果你使用過React框架，相信你一定了解過JSX語法糖。在此不去長篇大論JSX語法，簡單的說就是可以js和html混用，經(jīng)過編譯后轉(zhuǎn)化為JavaScript語法。
而除了JSX之外，在react中也可以直接用js語法來書寫元素，但是在JSX中html結(jié)構(gòu)更加直觀。

創(chuàng)建HTML的幾種方式

• 模板語法

  在底層實現(xiàn)上，vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合響應系統(tǒng)，在應用狀態(tài)改變時，vue能夠智能地計算出重新渲染組件的最小代價并應用到DOM操作上。

reactivity-system.png

• Render函數(shù)
  字符串模板的代替方案。render函數(shù)接收一個createElement方法作為第一個參數(shù)用來創(chuàng)建VNode

createElement 參數(shù)

createElement() 有3個參數(shù)：

• 參數(shù)一
  require: true
  type: {String | Object | Function}
  meaning: {一個 HTML 標簽字符串 | 組件選項對象 | 一個返回值類型為String/Object的函數(shù)}

• 參數(shù)二
  require: false
  type: { Object }
  meaning: {一個包含模板相關屬性的數(shù)據(jù)對象}

• 參數(shù)三
  require: false
  type: { String | Array }
  meaning: { 子節(jié)點(VNodes)，由createElement()生成，或簡單的使用字符串來生成"文本節(jié)點"}

深入data object參數(shù)

就是createElement的第二個參數(shù)。

{
  'class': {
     // 和`v-bind:class`一樣的API
  },
  style: {
     // 和`v-bind:style`一樣的API
  },
  attrs: {
     // 正常的 html 特性
  },
  props: {
     // 組件 props
  },
  domProps: {
    // DOM 屬性
  },
  on: {
    // 事件監(jiān)聽器基于on
    // 不再支持如 `v-on:keyup.enter` 修飾器，需手動匹配 keyCode
  },
  nativeOn: {
    // 僅對于組件，用于監(jiān)聽原生組件，而不是組件內(nèi)部使用`vm.$emit`觸發(fā)的事件
  },
  directives: [
    {
      // 自定義指令，注意事項：不能對綁定的舊值設值
      // vue 會為您持續(xù)追蹤
    }
  ],
  scopedSlots: {
  },
  slot: '', // 如果組件是其他組件的子組件，需為 slot 指定名稱
  // 其他特殊頂層屬性
  key: '',
  ref: ''
}

約束

就是createElement的第三個參數(shù)。
組件樹中的所有 VNodes 必須是唯一的。

使用 JavaScript 代替模板功能

v-if / v-for

v-if 在render中用if / else實現(xiàn)；
v-for 在render中用map實現(xiàn)

v-model

  render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.value = event.target.value
        self.$emit('input', event.target.value)
      }
    }
  })
}

別名

將 h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在應用中會觸發(fā)報錯。

es5

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      h(APP)
    )
  }
})

es6

new Vue({
  el: '#demo',
  render: h => h(APP)
})