面向未来编程（Future-Oriented Programming），建设未来 Vue 生态

[liximomo]

概要

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 这么近。

[lqzhgood]

额。。。我怎么感觉 vuex 还是优点呢……
redux 写的那个恼火，redux+Immutable 那个闹心……

[johnkiller]

期待+1

[noe132]

redux 需要写较多 boilerplate
vuex 和 redux 对 ts 支持不好

我自己的项目，store 是自己用 vue 的 observable 实现的

[yxcxx]

求求你们不要再搞新概念了，面向未来是什么鬼？是不是还要搞个面向世界编程和面向新时代编程啊？

[sunjourney]

@yxcxx #4 Python 就有面向未来编程啊

[liximomo]

@lqzhgood 这个还是要看场景的，vuex 对有些项目来说使用太繁琐了，库也是要随需求进一步细分的。

[liximomo]

@yxcxx 这不算是新感念，这里的未来是指已经大概明确的未来，与模糊的，不确定的未来不同。对我们来说，面向未来是一种决策，提前去接受，适应这种确定会发生的未来，可以使自己取得领先的优势。

[msaionyc]

前端都是些啥妖魔鬼怪，败坏概念，老老实实期待就期待，就你这也配叫 *-Oriented Programming，你面向了什么，面向了未来？ future ？别逗了

[guweimo]

@yxcxx 就是喜欢搞这些概念来吸引人啊，不然怎么吸引别人用新的呢。

[love]

期待。

当前的 react hooks 存在的问题在 vue 版 hooks 不存在，这个 1024 级好评。

[wly19960911]

最近写多了 rxjs，感觉也就那样了，仅仅是 observable，并不是 stream。

看了下 react-hooks + rxjs 用起来舒服太多了，很多想要的功能都能做。代码思路上都能简洁。

[sunjourney]

@love #10 yyx 说什么你就信什么吗？
针对这句：
---
当前的 react hooks 存在的问题在 vue 版 hooks 不存在

[littleshy]

hooks 是啥？ angular 里有木有类似的？

[miniwade514]

对于业务逻辑复杂的项目，真正的挑战还是代码设计，而不是我该用 class components 还是 hooks

[liximomo]

@miniwade514 但是你怎么设计还是受限于你底层的设施的，hooks 提供了更大的设计可能。

[Deville]

Future-Oriented Programming 我好慌。。

[GiantHard]

@littleshy React 新出的函数式风格的 API，angular 没有类似的东西，但是，如果 ng 中的生命周期事件转换成 observable 的话，ng 差不多就可以拥有类似的功能了。

[ben1024]

Vue 的路线走歪了，又要借鉴 React，又要超过 React
还是一个 minix 凑合着用吧

[www5070504]

面向未来编程 牛逼 太 6 了

敬仰之情如滔滔江水连绵不绝

又犹如黄河之水一发而不可收

[EPr2hh6LADQWqRVH]

唉，这代码出来还是一坨坨的，是不是都觉得前端不能算完整的程序员，可以放松要求啊

造出这么多概念，不就是把值类型全部替换成引用型吗，没觉得哪里新鲜

而且代码可读性根本没有提升

[q8164305]

我觉得 vue 现在挺好的，别再造概念了

[Mogugugugu]

期待 面向社会主义 编程

[notreami]

前端们，先把 Vue2.0 的生态升级到 3.0。
Vue 的未来肯定是废弃啊。也许 2 年，也许 200 年。。。

[zhwithsweet]

@sunjourney #12 话不能这么说，至少像我这样的菜鸡是比较相信的 yyx,技术被碾压了。

[MrKou47]

@avastms 说的这么明白，还让不让人恰饭了？

[sailei]

vue 3.0 终于向轻量化 走了

[sugars]

非常期待，出来马上学

[liximomo]

@sugars 利用 vue-function-api 这个包，你现在就可以开始学啦

[xfriday]

还是 angular.io 看着舒服

[esbug]

@notreami 这句话怎么说?

[wszgrcy]

@xfriday 自从学会了 angular，发现 angular 的每次改动越来越小了。。。反观其它框架，恨不得天天搞大新闻，不知道会不会谷歌放弃维护

[murmur]

@wszgrcy vue 现在还是 2 的稳定版，你说的天天搞大新闻的是 react

[kiwier]

面向四个现代化编程，哈哈

[dodo2012]

我选择 react，搞来搞去发现 react 最简单，vue 的概念越来越多了

[Magentaize]

所以说 rxjs 是面向世界末日编程？

[wobuhuicode]

vue 的使用者小白多，吹个 NB 也能理解
大家都是 996 写代码的。用个框架就能把你高人一等了不成

[ianva]

老老实实抄就行了，还面向未来编程，刚抄一个 hooks 就开始得瑟

[reus]

抄 angular
抄 virtual dom
抄 hooks
下一个抄什么？
呵呵，不改 copycat 本质
hooks 那么好的话，我直接用 react 不就行了，还用 vue 干嘛？反正 vue3 等于砍掉重练了，学 react 还不是一样

[Caballarii]

尤大这次有点过于高估他的用户群体能力了

[SpaceVim]

前段整天喜欢叫嚣各种虚的

[tomoya92]

@yxcxx 楼主怎么知道 vue3 能代表未来的编程方向呢？

ps 明天双色球是多少，楼主偷偷告诉我呗 😂

[ianva]

@reus 这一版看起来就像是从抄 angular 向抄 react 转型的一版

[idealhs]

面向社会主义编程

[l1nyanm1ng]

贵圈真乱

[IsaacYoung]

future 有点扯

[Aruforce]

前端娱乐圈？ js 娱乐圈？

[FrankHB]

smg，我还以为你们前端○已经进化到吃透 call by future 了呢。

[love]

@sunjourney 没看过就别 bb 了，我用了 react hooks 这么多月，一看 yyx 发的 rfc 就知道相对 react 改进在哪。vue 的 hooks 和 react 的 hooks 差别相当大，react 纯函数式，每次 render 都会运行一次函数，导致一些反直觉问题，要用 useCallback/useRef 之类的绕过,用 useEffect 也要很小心。而 vue 根本不是函数式，只运行一次就把组件状态全部打在闭包里，运行模型相当直觉，心智负担减少很多。

[natuka]

相比之下创新比较困难，在原有的基础上进行改进，这个与前者相比容易些。

[ldehai]

别的不说，Vue 的文档写的确实不错

[wszgrcy]

@murmur 对 react 动不动就冒出来新东西，相比开始，我觉得 angular 真稳定，最多就是加个参数，加个方法，有时候还用不到。。。。

[murmur]

@reus 按你这么说网上哪些 preact 这些框架都是吃饱撑着的，有 react 干嘛还要 react 兼容对不对，都是开源代码互相借鉴还上升到抄袭上了，我记得 react 的贡献者不是还跟 vue 有合作关系