心路歷程：vue2.0+webpack+koa2 先後端同構實踐（二）

vue2.0之JSX初體驗

JSX入門

JSX來至於React，上手並不複雜，在Vue中使用只有小部分差別

• JSX語法介紹

• Vue中的JSX語法差別

標籤必須閉合

在 JSX 中， <MyComponent /> 是合法的，而 <MyComponent> 就不合法。
全部的標籤都必須閉合，能夠是自閉和的形式，也能夠是常規的閉合。

<div />和<div></div> 是等價的。

標籤與組件

要渲染 HTML 標籤，只需在 JSX 裏使用小寫字母開頭的標籤名。
要渲染 React 組件，只需建立一個大寫字母開頭的本地變量。

分支 if/else

if-else-in-JSX

可是實踐時，發現vue2.0並不支持，也許是個人姿式不對，稍後填坑。

發現多是一個bug插入JSX中的變量爲空字符串時致使以下問題，已經提了issue

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. Bailing hydration and performing full client-side render.

循環 for

編輯器中格式化插件支持

推薦插件js-beautify，對html+css(less)+js(es6)都良好支持。
支持JSX只要在.jsbeautify文件中添加以下配置：

{
    ....
    "e4x": true
    ....
}

從官網例子開始

import Column from './column'

export default {
  props: ['row'],
  serverCacheKey: props => {
    return props.row.id + '::' + props.row.items.length
  },
  render (h) {
    return (
      <tr>
        <th>{this.row.id}</th>
        {this.row.items.map(item => <Column item={item}/>)}
      </tr>
    )
  }
}

源碼

注意點

render 方法的參數名必須是h，緣由沒深究研究，github有提到。

給本身挖坑

開始看源碼時，誤將render寫法等同於如下代碼

render: h => {
    return (
        ...
        <th>{this.row.id}</th>
        ...
    )
}

致使編譯結果this 被編譯成 undefined

render: function render(h) {
    return h(
        ...
          "th",
          [undefined.row.id]
        ...
    )
}

做者的回覆

尤大大已經解答了這個問題

arrow functions uses lexical this, you can only use normal functions if you want this.

箭頭函數

回頭翻看了下阮老師寫的《ECMAScript 6 入門》箭頭函數章節，以前看時沒能理解到位。

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

使用JSX實現Vue2.0功能的一些方案

插入HTML格式與filters的使用

基本和JSX同樣

Vue組件中的slot[name]標籤替代方案

若是是單slot能夠經過子節點表達式插入，一個組件有多solt時怎麼處理呢？

如何實現雙向綁定？

目前的方案基於Vuex來作單向數據流，告別雙向綁定。到時候遇到作表單的時候再來仔細考慮下這個問題。