Vue3.0学习 - 第四节，Vue3 组合api composition api 和 vue2 option api 的混用

setup 函数

setup 函数的一些相关事项官方文档

• 新的 setup 组件选项在创建组件之前执行

由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

就是说，data，computed 等自主定义的那些初始化数据都将会无法提供访问。

• 在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

简单来说，就是在 setup() 中，this 指向 undefined，因为setup函数，是在beforecreate钩子之前完成的

 composition api + option api

composition api 和 option api 允许混用。option api 就是过去那种 data，computed 的 Vue2.x 函数定义方案。

混用代码大概长这样

这是一个 两个api 相互之间没有交互的示例，我们也可以让 option api 引用 compostion api 中的内容。

代码长这样

这个示例，在myfun1中使用composition api的age,这样点击 按钮1  的时候，两个数字都会变化

点击 按钮1  

注意：

• 只有 option api 引用 composition api 的份，没有反过来的份；
• 而且由于 composition api 立即执行并 return 的原因，它不被允许作为 async 异步函数进行定义，只能是同步不能是异步。
• setup函数无法使用data和methods，setup函数中this为undefined