乐趣区

面向未来编程FutureOriented-Programming建设未来-Vue-生态

概要

Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 后不久,Vue 社区也迎来了自己的组件逻辑复用机制。

未来

Function-based API 背后的设计动机和优缺点,尤大已经在 RFC 中表述的很清楚了,可以肯定的是它所带来的价值远远大于它所引起的问题。随着 3.0 的逐渐逼近,我们可以预见整个 vue 的生态会发生巨大变化,我们看看具体会有哪些变化。

状态管理

React 社区当前最流行的状态管理方案分别是单向数据流的 Redux 和 基于 observableMobx。而 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-class-component'

// 安装插件
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 这么近。

退出移动版