面向未来编程（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: `{{ x }} {{ y }} {{ width }} {{ height }}`}

未来很美好，让人充满憧憬，我知道很多都和我一样对此心怀激动。最理想的情况下，我们要在 2019 年第三季度才能迎来 Vue3 的正式发布。But，Vue 社区从来不让你失望，Vuer 永不等待。我要向大家介绍 vue-function-api，从现在开始解锁 Vue3 最新特性 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-class-component'// 安装插件Vue.use(plugin);new Vue({  template: `
  
    count is {{ count }}
    plusOne is {{ plusOne }}
    count++
  
`,
  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 这么近。