[VueJS] 眼藥水 2.0

這年頭好像 2.0 比較夯，隔壁棚的 ng 也出了 2.0（而且聽說要重來，React 表示：

推薦

當然要先敗讀一下 Kuro 的大作，

V1 與 V2 元件實體之差異

官方文件 Render Function

實際操作所遇到的狀況

你如果在獨立元件當中，不使用 Render Function 的話，官方會建議你去改 webpack 的設定（因為預設是使用 vue.common.js 來作為渲染引擎，如果你的獨立元件使用了 template 的話，官方會建議你改成 vue.min.js

主要是會引發這樣的警告：

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

差異在於，如果你不用，那就無法使用 2.0 的 Server-Side-Render 的功能。

所以原本自己寫的元件，就必須改由 render 去接手。

Props 的差異

由於 2.0 的 props 已經強迫改為 one-way 的方式，所以原有的 twoWay, .sync 基本上就沒有了（被移除。所以，當你原先使用雙向的溝通方式，就得改由 Vuex 或是事件的方式來做。

另外，如果你在過程中直接操作（或是修改 props 的值，也會拿到一些警告，不礙事，但是基本上就是沒辦法改（請用事件或是 Vuex 之類的東西做。

Vuex 的改變

跟 Vue 比起來，這大概是改最多的。Store 的結構沒什麼太大的轉變，有改變的是 Actions, Getters 取用的方式不一樣了，

// Vue 1.x
import { myAction } from '../vuex/actions'
import { myGetter } from '../vuex/getters'

export default {
  vuex: {
    actions: {
      myAction
    },
    getters: {
      myGetter
    }
  }
}

// Vue 2.0
import { mapActions, mapGetters } from 'vuex'

export default {
  methods: mapActions({
    myAction: 'myAction'
  }),
  computed: mapGetters({
    myGetter: 'myGetter'
  })
}

是的，他佔用了 methods 與 computed 這兩個方法，如果你有額外的方法在這裡面，你可以考慮用 Objact.asset 來做簡易的擴充。

另外，Vuex 裡面現在可以更方便使用 async/await 的新方法，原本的 dispatch 則拆分為 dispatch 與 commit 兩種，簡單的例子像是這樣，

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    // wait for actionA to finish
    await dispatch('actionA')
    commit('gotOtherData', await getOtherData())
  }
}

然後 middleware 沒有了，換成 plugins，另外 logger 也換了位置，

import Vue from 'vue'
import createLogger from 'vuex/dist/logger'
import myModule from './vuex/my-module'

Vue.use(Vuex)

const debug = process.env.NODE_ENV === 'development'

export default new Vuex.Store({
  modules: {
    myModule
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

Vue-router 2.x 結構轉變

設定變的比較簡單，不過原本的 Nested Route 寫法改成一大串的陣列。另外，在元件裡面的寫法也略有改變，

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

好吧，不能說略有，應該說只剩 beforeRouteEnter 與 beforeRouteLeave 可以用而已。至於原本的 $router 與 $route 則不受影響，可以繼續使用。

小結

嘗試著把一些東西改寫成 2.0，實際使用 devtools 測試，畫面的產出速度可以再縮減 1~2 秒左右（不考慮 AJAX 拉資料回來的時間差，實際上差不到 100ms