面向將來編程（Future-Oriented Programming），建設將來 Vue 生態

概要

Vue 的做者尤雨溪最近公佈了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 後不久，Vue 社區也迎來了本身的組件邏輯複用機制。

將來

Function-based API 背後的設計動機和優缺點，尤大已經在 RFC 中表述的很清楚了，能夠確定的是它所帶來的價值遠遠大於它所引發的問題。隨着 3.0 的逐漸逼近，咱們能夠預見整個 vue 的生態會發生巨大變化，咱們看看具體會有哪些變化。

狀態管理

React 社區當前最流行的狀態管理方案分別是單向數據流的 Redux 和 基於 observable 的 Mobx。而 Vue 社區則是單向數據流的 Vuex 一枝獨秀。很長一段時間，我都在期待 Vue 社區能夠出現 Mobx 的對標物，對於 Vue 這樣一個自己就是基於 observable 的框架，卻沒有相應的狀態管理庫，着實使人費解。雖然存在 mobx-vue，但它是基於 mobx 而實現的，並無利用 Vue 自己的 observable 機制，不僅是庫大小，在使用體驗式上也不如人意。

目前的現狀主要是因爲 Vue 並無將其底層的 observable API 曝光出來。而在 Vue3 與 Function-based API 中， Vue 會提供更多的 observable API，相信這一改動能夠幫助社區產生一些全新易用的狀態管理庫。

組件/庫

新的設計容許咱們將組件邏輯單獨封裝出來，會涌現出大批相似 react-use 這類的邏輯通用庫。這類型的庫是一系列通用功能的合集，自然 tree-shaking 友好，相似 lodash 在 JavaScript 開發中的地位同樣，最終也會有一款提供常見功能的 Function 類庫成爲 Vue 開發中的瑞士軍刀。

import { useMousePosition, useWindowSize } from '^.-';

// 在組件中使用該函數
const Component = {
  setup() {
    const { x, y } = useMousePosition()
    // 與其它函數配合使用
    const { width, height } = useWindowSize()
    return { x, y, width, height }
  },
  template: `<div>{{ x }} {{ y }} {{ width }} {{ height }}</div>`
}

當下

將來很美好，讓人充滿憧憬，我知道不少都和我同樣對此心懷激動。最理想的狀況下，咱們要在 2019 年第三季度才能迎來 Vue3 的正式發佈。But，Vue 社區歷來不讓你失望，Vuer 永不等待。我要向你們介紹 vue-function-api，從如今開始解鎖 Vue3 最新特性 Function API。

---

vue-function-api

vue-function-api 是一個開源項目，徹底兼容 Vue3 的 Function API，擁簇面向將來編程，致力於加速 Vue 將來生態圈的建設。開發者能夠藉助它使用 Vue3 的組件邏輯複用機制開發下一代 vue 應用程序，利用 Vue3 的響應性 API 建設將來 Vue 生態。

安裝

npm

npm install vue-function-api --save

yarn

yarn add vue-function-api

使用

vue-function-api 利用了 Vue 的 plugin 機制，只須要在使用前進行註冊便可。

import Vue from 'vue';
import { plugin, value, computed, watch, onMounted } from 'vue-function-api'

// 安裝插件
Vue.use(plugin);

new Vue({
  template: `
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
`,
  setup() {
    // reactive state
    const count = value(0);
    // computed state
    const plusOne = computed(() => count.value + 1);
    // method
    const increment = () => {
      count.value++;
    };
    // watch
    watch(
      () => count.value * 2,
      val => {
        console.log(`count * 2 is ${val}`);
      }
    );
    // lifecycle
    onMounted(() => {
      console.log(`mounted`);
    });
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment,
    };
  },
}).$mount('#app');

結語

歷來沒有一次這麼期待過 Vue3，也歷來沒有一次離 Vue3 這麼近。