提早使用Vue 3.0新特性，vue-function-api尝鲜

开场白

Vue3.0的预告已经快一年了，本月的Vue Conf大会上尤雨溪放出了Vue 3.0最重要的RFC，即Function-based API，有很多的小伙伴对此提出质疑。对此，我也想知道这样的一个升级究竟能带来怎样的改变。

正好VueJs的开发团队放出了基于Vue2.0的vue-function-api插件，能够在Vue2.0上进行function-api的尝鲜，做为新技术的狂热追求者，必需要试一试的。

Talk is less, show me the code.

示例

<template>
  <div id="app">
    {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}}
  </div>
</template>
<script lang="ts">
  import {interval} from 'rxjs/observable/interval';
  import {value as Wrapper} from 'vue-function-api';

  const time = Wrapper(new Date());
  interval(100).pipe().subscribe(() => {
    time.value = new Date();
  });

  export default {
    setup() {
      return {time};
    }
  };
</script>
复制代码

解析

上面是一个基于function-api简单的显示当前时间的实例代码，关于为何在外部改变变量的时候可以触发视图变化，这个问题我相信关注function-api的伙伴们应该都清除了，就再也不多说。

能够看到，定义变量和修改变量的代码都是在组件属性对象的外部声明的，这里为了直观放在了同一个文件，其实能够把这部分代码提取出来：

新建一个time.ts文件

import {value as Wrapper} from 'vue-function-api';
import {interval} from 'rxjs/observable/interval';

const time = Wrapper(new Date());
interval(100).pipe().subscribe(() => {
  time.value = new Date();
});

export default time;
复制代码

这时候Vue文件就只剩下：

<template>
  <div id="app">
    {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}}
  </div>
</template>
<script lang="ts">
  import time from './time';

  export default {
    setup() {
      return {time};
    }
  };
</script>
复制代码

运行彻底没问题

这样咱们能够在须要显示当前时间的不一样组件中引入time这个对象，把它展现出来就OK了。

相信看到这里很多的小伙伴心中已经有些想法了，这不就是vuex的功能吗？没错，这就是一个全局共享数据的实现，和使用vuex彻底是同样的，可是比vuex更灵活，而且咱们不须要额外的状态管理插件就能实现状态管理了。

watch

看完上面的部分，相信你们已经对function-api的设计方式有了必定的理解，那么咱们再来看看watch。

关于Vue2.0的watch有一个诟病的地方，就是被watch的路径是一个字符串，在维护上很是麻烦（好比说重构），若是使用对象引用的方式，就不存在这样的问题了。

const api = require('vue-function-api');
const Vue = require('vue');
const { interval } = require('rxjs/observable/interval');
Vue.use(api.plugin);
const value = api.value(new Date());
api.watch(() => value.value, (val, old) => {
  if (old && val.getSeconds() !== old.getSeconds()) {
    console.log(`seconds changed from ${old.getSeconds()} to ${val.getSeconds()}`);
  }
});
interval(100)
    .pipe()
    .subscribe(() => {
      value.value = new Date();
    });
复制代码

上面的代码能够直接在js中运行, 也是能够和组件剥离的。

今天主要讲的是一个简单的尝试，至于function-api的使用场景，仍然要在实践中去探索。而且Vue2.0的function-api插件也不建议在生产环境中使用，一切等3.0正式发布再说。