选项式api V/S 组合式api

Options 选项式api

• 特点：多个选项的对象来描述组件的逻辑，例如data选项写数据，methods选项写函数...，一个功能逻辑的代码分散，选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
• 优点：易于学习和使用，写代码的位置已经定好
• 缺点：逻辑代码复杂，组织性差不便于复用

export default {
  data() {       //状态，被拦截的东西
    return {

    }
  },
  methods: {      //事件绑定，逻辑计算,可以不用return。

  },
  computed: {     //(计算属性:重视结果)解决模板过重问题，必须要有return，只求结果，有缓存，同步

  },
  watch: {        //(观察者:重视过程)监听某个值的改变，不用返回值，异步同步都可以

  },
  component: {     //组件

  },
  filter: {       //过滤器(V3弃用)

  }
}

 Compositon   组合式api

• 特点：基于函数的组合 ，是一系列 API 的集合，可以使用函数的方式书写 Vue 组件。以 Vue 中数据可变的、细粒度的响应性系统为基础。通常会与 <script setup> 搭配使用。告诉 Vue 需要在编译时进行一些处理，导入和顶层变量/函数都能够在模板中直接使用。
• 缺点：学习成本可能会增加，需要良好的代码组织能力和拆分逻辑能力，晦涩难懂，缺乏组织性。
• 优点：

1. 提供了更好的逻辑复用：能够通过“组合函数”来实现更加简洁高效的逻辑复用。
2. 具有更灵活的代码组织：与同一个逻辑关注点相关的代码可以放在一起，不需要再为了一个逻辑关注点在不同的选项块间来回滚动切换。随时将功能的一部分拆分出去。
3. 响应式api：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

 

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 更改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`计数器初始值为 ${count.value}。`)
})
</script>

<template>
  <button @click="increment">点击了：{{ count }} 次</button>
</template>

 浅谈

 两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的。选项式API会将你的思绪锁定在规定的代码组织模式中，没有摆脱的余地，这会导致在更大规模的项目中难以进行重构或提高代码质量；组合式 API 不会像选项式 API 那样手把手教你该把代码放在哪里，这意味着代码组织会更糟糕，但反过来，它却让你可以像编写普通的 JavaScript 那样来编写组件代码。

组合式 API 更适用于大型的项目，而对于中小型项目来说选项式 API 仍然是一个不错的选择。

最后补上生命周期与钩子函数

---