vue3 Composition API使用示例教程

Vue3新增了Composition API。我们只需将实现某一功能的相关代码全部放进一个函数中，然后return需要对外暴露的对象。不同功能的代码都是一个个函数，最终在setup()函数中导入这些函数API，来使用这些功能。

在Vue3中，我们在小型组件仍可以继续沿用Options API，而对于大型组件则推荐使用Composition  API。

Composition API没有this，如果要获取实例可以通过gitCurrentInstance这个函数,要使用它，需要手动引入，Composition API的生命周期，ref，toRef等要使用的话也是需要手动引入的。

用reactive定义响应数据,reactive作用将一个普通对象转换成响应式对象，和vue2里面的Options里面的data一样里面的数据都是响应式的。

生命周期也发生了一些变化，setup是beforeCreate和created的组合，vue3中的生命周期除了卸载阶段名称变了，变成onbeforeUnmount和onUnmounted,其它的只是在前面添加了一个on。

vuex在Composition中使用，手动移入vuex，用reactive定义响应式数据，该数据有属性goods,函数在onMounted生命周期中调用，生命周期中传入的是一个函数。调用vuex的方法，执行后直接给响应式数据属性赋值就行了。

最后在调用toRef或者toRefs对响应式数据属性做个处理，做个处理就可以直接使用这个属性（直接goods），不需要再去用“state.goods"的方式使用了。toRef或toRefs变量命名建议用xxx.Ref和xxx.Refs。

ref生成一个响应式数据，可用于模板和reactive（用于模板和reactive不需要通过.value），通过.value修改值。

toRef针对响应式对象的一个属性生成一个ref，ref具有响应式，二者保持引用关系。

toRefs将响应式对象转换成普通对象，对象的每个属性都是一个ref,二者保持引用关系。

要使用Composition中的方法也需要通过renturn导出。

 模板中使用