Vue 3.0 前瞻Vue Function API新特性体验

onUnmounted(() => {
console.log('unmounted!');
});
},
};

一些思考

上面的详解部分，主要抽取的是 Vue Function API 的常见部分，并非RFC：Function-based component API的全部，例如其中的依赖注入，TypeScript类型推导等优势，在这里，由于篇幅有限，想要了解更多的朋友，可以点开RFC：Function-based component API查看。个人也在Function-based component API讨论区看到了更多地一些意见：

由于底层设计，在setup取不到组件实例this的问题，这个问题在笔者尝试体验时也遇到了，期待正式发布的 Vue 3.x 能够改进这个问题。
对于基本类型的值必须使用包装对象的问题：在 RFC 讨论区，为了同时保证TypeScript类型推导、复用性和保留Vue的数据监听，包装属性必须使用.value来取值是讨论最激烈的
关于包装对象value和state方法命名不清晰可能导致开发者误导等问题，已经在Amendment proposal to Function-based Component API这个提议中展开了讨论：

setup() {
  const state = reactive({
    count: 0,
  });
  const double = computed(() => state.count * 2);
  function increment() {
    state.count++;
  }
  return {
    ...toBindings(state), // retains reactivity on mutations made to `state`
    double,
    increment,
  };
}

引入reactive API 和 binding API，其中reactive API 类似于 state API ， binding API 类似于 value API。
之前使用的方法名state在 Vue 2.x 中可能被用作组件状态对象，导致变量命名空间的冲突问题，团队认为将state API 更名为 reactive 更为优雅。开发者能够写出const state = … ，然后通过state.xxxx这种方式来获取组件状态，这样也相对而言自然一些。
value方法用于封装基本类型时，确实会出现不够优雅的.value的情况，开发者可能会在直接对包装对象取值时忘记使用.value，修正方案提出的 reactive API，其含义是创建响应式对象，初始化状态state就使用reactive创建，可保留每项属性的getter和setter，这么做既满足类型推导，也可以保留响应式引用，从而可在不同模块中共享状态值的引用。
但reactive可能导致下面的问题，需要引入binding API。 解决，如使用reactive创建的响应式对象，对其使用拓展运算符…时，则会丢失对象的getter和setter，提供toBindings方法能够保留状态的响应式。

下一篇文章中，笔者将阅读vue-function-api的核心部分代码原理，包括setup、observable、lifecycle等，从内部探索 Vue Function API 可能带给我们的改变。

当然，目前 Vue Function API 还处在讨论阶段，Vue 3.0 还处在开发阶段，还是期待下半年 Vue 3.0 的初版问世吧，希望能给我们带来更多的惊喜。