选项API写法和组合API写法

  • Post author:
  • Post category:其他


vue2是用的选项API语法(

Options ApI

):数据和方法相分离

  • 咱们在vue2.x项目中使用的就是

    选项API

    写法(

    Options ApI

    • 代码风格:data选项写数据,methods选项写函数…,一个功能逻辑的代码分散。
  • 优点:易于学习和使用,写代码的位置已经约定好
  • 缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读。
  • 补充:虽然提供mixins用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护。

vue3使用的是组合式写法(

Compositon API

):一个功能逻辑的代码组织在一起

  • 咱们在vue3.0项目中将会使用

    组合API

    写法

    • 代码风格:一个功能逻辑的代码组织在一起(包含数据,函数…)
  • 优点:功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护
  • 缺点:需要有良好的代码组织能力和拆分逻辑能力,PS:大家没问题。
  • 补充:为了能让大家较好的过渡到vue3.0的版本来,

    也支持vue2.x选项API写法

组合api之setup函数:


setup

是一个新的组件选项,作为组件中使用组合API的起点。

在模版中需要使用的数据和函数,需要在

setup

返回,所以一定要有return。

vue3中没有this


setup在

组件初始化之前执行,它返回的数据和函数可在模版使用。

认识vue3.0生命周期钩子函数(7个)


setup

创建实例前


onBeforeMount

挂载DOM前


onMounted

挂载DOM后


onBeforeUpdate

更新组件前


onUpdated

更新组件后


onBeforeUnmount

卸载销毁前


onUnmounted

卸载销毁后

组合API的生命周期钩子有7个,可以多次使用同一个钩子,执行顺序和按照上述书写顺序执行。

组合API-reactive函数

reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。



版权声明:本文为m0_67805754原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。