理解Vue3采用的Composition API

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接收一个回调函数,不用指明追踪哪个数据源,它会自动追踪回调函数中使用的所有响应式数据。

 

posted @ 2022-08-09 16:10  ˙鲨鱼辣椒ゝ  阅读(223)  评论(0)    收藏  举报