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