面向未來編程（Future-Oriented Programming），建設(shè)未來 Vue 生態(tài)

J4ck_Chan 發(fā)布于2019-08-23 18:12 / 2152人閱讀

摘要：狀態(tài)管理社區(qū)當(dāng)前最流行的狀態(tài)管理方案分別是單向數(shù)據(jù)流的和基于的。目前的現(xiàn)狀主要是由于并沒有將其底層的曝光出來。是一個開源項目，完全兼容的，擁簇面向未來編程，致力于加速未來生態(tài)圈的建設(shè)。

概要

Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 后不久，Vue 社區(qū)也迎來了自己的組件邏輯復(fù)用機制。

未來

Function-based API 背后的設(shè)計動機和優(yōu)缺點，尤大已經(jīng)在 RFC 中表述的很清楚了，可以肯定的是它所帶來的價值遠遠大于它所引起的問題。隨著 3.0 的逐漸逼近，我們可以預(yù)見整個 vue 的生態(tài)會發(fā)生巨大變化，我們看看具體會有哪些變化。

狀態(tài)管理

React 社區(qū)當(dāng)前最流行的狀態(tài)管理方案分別是單向數(shù)據(jù)流的 Redux 和基于 observable 的 Mobx。而 Vue 社區(qū)則是單向數(shù)據(jù)流的 Vuex 一枝獨秀。很長一段時間，我都在期待 Vue 社區(qū)可以出現(xiàn) Mobx 的對標(biāo)物，對于 Vue 這樣一個本身就是基于 observable 的框架，卻沒有相應(yīng)的狀態(tài)管理庫，著實令人費解。雖然存在 mobx-vue，但它是基于 mobx 而實現(xiàn)的，并沒有利用 Vue 本身的 observable 機制，不只是庫大小，在使用體驗式上也不如人意。

目前的現(xiàn)狀主要是由于 Vue 并沒有將其底層的 observable API 曝光出來。而在 Vue3 與 Function-based API 中， Vue 會提供更多的 observable API，相信這一改動可以幫助社區(qū)產(chǎn)生一些全新易用的狀態(tài)管理庫。

組件/庫

新的設(shè)計允許我們將組件邏輯多帶帶封裝出來，會涌現(xiàn)出大批類似 react-use 這類的邏輯通用庫。這類型的庫是一系列通用功能的合集，天然 tree-shaking 友好，類似 lodash 在 JavaScript 開發(fā)中的地位一樣，最終也會有一款提供常見功能的 Function 類庫成為 Vue 開發(fā)中的瑞士軍刀。

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

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

當(dāng)下

未來很美好，讓人充滿憧憬，我知道很多都和我一樣對此心懷激動。最理想的情況下，我們要在 2019 年第三季度才能迎來 Vue3 的正式發(fā)布。But，Vue 社區(qū)從來不讓你失望，Vuer 永不等待。我要向大家介紹 vue-function-api，從現(xiàn)在開始解鎖 Vue3 最新特性 Function API。

vue-function-api

vue-function-api 是一個開源項目，完全兼容 Vue3 的 Function API，擁簇面向未來編程，致力于加速 Vue 未來生態(tài)圈的建設(shè)。開發(fā)者可以借助它使用 Vue3 的組件邏輯復(fù)用機制開發(fā)下一代 vue 應(yīng)用程序，利用 Vue3 的響應(yīng)性 API 建設(shè)未來 Vue 生態(tài)。

安裝

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: `
  
    count is {{ count }}
    plusOne is {{ plusOne }}
    
  
`,
  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");

結(jié)語

從來沒有一次這么期待過 Vue3，也從來沒有一次離 Vue3 這么近。