理解Vue3采用的Composition API

阅读目录

1. Options API
2. Composition API
3. WacthEffect与Watch的区别

 

---

回到顶部

Options API

 

 

 

 

　　在Vue2中，我们会在一个组件实例内部定义各种选项，如data、methods，这些就是Options API。然而，使用Options API，我们需要将实现某一功能的相关代码拆分到不同的选项中，当组件变得复杂时容易造成逻辑混乱。

 

回到顶部

Composition API

 

 

 

 

　　Vue3新增了Composition API，也称为“组合式API”。我们只需将实现某一功能的相关代码全部放进一个函数中，然后return需要对外暴露的对象。不同功能的代码都是一个个函数，最终在setup()函数中导入这些函数API，来使用这些功能。在Vue3中，我们在小型组件仍可以继续沿用Options API，而对于大型组件则推荐使用Composition  API。

优点：

• 每个逻辑功能代码中使用的数据或接口都作为函数的局部变量，不会造成命名冲突；
• 使用Composition API几乎见不到this指针，避免this指针指向不明导致的其他问题；

 

回到顶部

WacthEffect与Watch的区别

　　watch只追踪明确侦听的数据源，不会追踪任何在回调中访问的东西。仅在数据源发生改变时触发回调，当然，这个机制可以通过传入immediate：true配置项来改变.

　　watchEffect接收一个回调函数，不用指明追踪哪个数据源，它会自动追踪回调函数中使用的所有响应式数据。