提早使用Vue 3.0新特性，vue-function-api嚐鮮

開場白

Vue3.0的預告已經快一年了，本月的Vue Conf大會上尤雨溪放出了Vue 3.0最重要的RFC，即Function-based API，有很多的小夥伴對此提出質疑。對此，我也想知道這樣的一個升級究竟能帶來怎樣的改變。

正好VueJs的開發團隊放出了基於Vue2.0的vue-function-api插件，能夠在Vue2.0上進行function-api的嚐鮮，做爲新技術的狂熱追求者，必需要試一試的。

Talk is less, show me the code.

示例

<template>
  <div id="app">
    {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}}
  </div>
</template>
<script lang="ts">
  import {interval} from 'rxjs/observable/interval';
  import {value as Wrapper} from 'vue-function-api';

  const time = Wrapper(new Date());
  interval(100).pipe().subscribe(() => {
    time.value = new Date();
  });

  export default {
    setup() {
      return {time};
    }
  };
</script>
複製代碼

解析

上面是一個基於function-api簡單的顯示當前時間的實例代碼，關於爲何在外部改變變量的時候可以觸發視圖變化，這個問題我相信關注function-api的夥伴們應該都清除了，就再也不多說。

能夠看到，定義變量和修改變量的代碼都是在組件屬性對象的外部聲明的，這裏爲了直觀放在了同一個文件，其實能夠把這部分代碼提取出來：

新建一個time.ts文件

import {value as Wrapper} from 'vue-function-api';
import {interval} from 'rxjs/observable/interval';

const time = Wrapper(new Date());
interval(100).pipe().subscribe(() => {
  time.value = new Date();
});

export default time;
複製代碼

這時候Vue文件就只剩下：

<template>
  <div id="app">
    {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}}
  </div>
</template>
<script lang="ts">
  import time from './time';

  export default {
    setup() {
      return {time};
    }
  };
</script>
複製代碼

運行徹底沒問題

這樣咱們能夠在須要顯示當前時間的不一樣組件中引入time這個對象，把它展現出來就OK了。

相信看到這裏很多的小夥伴心中已經有些想法了，這不就是vuex的功能嗎？沒錯，這就是一個全局共享數據的實現，和使用vuex徹底是同樣的，可是比vuex更靈活，而且咱們不須要額外的狀態管理插件就能實現狀態管理了。

watch

看完上面的部分，相信你們已經對function-api的設計方式有了必定的理解，那麼咱們再來看看watch。

關於Vue2.0的watch有一個詬病的地方，就是被watch的路徑是一個字符串，在維護上很是麻煩（好比說重構），若是使用對象引用的方式，就不存在這樣的問題了。

const api = require('vue-function-api');
const Vue = require('vue');
const { interval } = require('rxjs/observable/interval');
Vue.use(api.plugin);
const value = api.value(new Date());
api.watch(() => value.value, (val, old) => {
  if (old && val.getSeconds() !== old.getSeconds()) {
    console.log(`seconds changed from ${old.getSeconds()} to ${val.getSeconds()}`);
  }
});
interval(100)
    .pipe()
    .subscribe(() => {
      value.value = new Date();
    });
複製代碼

上面的代碼能夠直接在js中運行, 也是能夠和組件剝離的。

今天主要講的是一個簡單的嘗試，至於function-api的使用場景，仍然要在實踐中去探索。而且Vue2.0的function-api插件也不建議在生產環境中使用，一切等3.0正式發佈再說。