概要

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

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: `
  

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

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

期待+1

redux 需要写较多 boilerplate
vuex 和 redux 对 ts 支持不好
我自己的项目，store 是自己用 vue 的 observable 实现的

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

Python 就有面向未来编程啊

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

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

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

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

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

最近写多了 rxjs，感觉也就那样了，仅仅是 observable，并不是 stream。
看了下 react-hooks + rxjs 用起来舒服太多了，很多想要的功能都能做。代码思路上都能简洁。

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

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

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

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

Future-Oriented Programming 我好慌。。

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

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

面向未来编程 牛逼 太 6 了
敬仰之情如滔滔江水连绵不绝
又犹如黄河之水一发而不可收

唉，这代码出来还是一坨坨的，是不是都觉得前端不能算完整的程序员，可以放松要求啊
造出这么多概念，不就是把值类型全部替换成引用型吗，没觉得哪里新鲜
而且代码可读性根本没有提升

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

期待 面向社会主义 编程

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

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

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

vue 3.0 终于向轻量化 走了

非常期待，出来马上学

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

还是 angular.io 看着舒服

这句话怎么说?

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

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

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

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

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

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

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

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

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

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

楼主怎么知道 vue3 能代表未来的编程方向呢？
ps 明天双色球是多少，楼主偷偷告诉我呗