面向未来编程（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 这么近。