vue3的组合式API和选项式API

vue3的组合式API和选项式API：

组合式：

在Vue 3中，组合式 API（Composition API）的生命周期钩子可以和setup函数同级使用，也可以在其内部进行声明。通常，我们会在setup函数内部使用组合式API来处理逻辑，并且可以使用Vue 3提供的生命周期钩子函数。

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, Vue 3!');
 
    // 在组件挂载后执行
    onMounted(() => {
      console.log('Component is mounted!');
    });
 
    // 在组件卸载前执行
    onUnmounted(() => {
      console.log('Component is unmounted!');
    });
 
    // 返回响应式数据以供模板使用
    return {
      message
    };
  }
};
</script>

script setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

选项式：

在这个例子中，我们定义了一个Vue组件，它包括了三个主要部分：data、methods和template。data函数返回一个对象，包含组件的响应式数据；methods对象定义了可以在模板中或其他地方调用的方法；template部分定义了如何将数据渲染到DOM中。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">Click me</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!',
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter += 1;
    },
  },
};
</script>

两者对比：

使用组合式API可以

更好的逻辑复用

更灵活的代码组织

更好的类型推导

更小的生产包体积

选项式 API 确实允许你在编写组件代码时“少思考”，这是许多用户喜欢它的原因。然而，在减少费神思考的同时，它也将你锁定在规定的代码组织模式中，没有摆脱的余地，这会导致在更大规模的项目中难以进行重构或提高代码质量。在这方面，组合式 API 提供了更好的长期可维护性。

组合式 API 能够覆盖所有状态逻辑方面的需求

一个项目可以同时使用两种API

选项式API不会被抛弃

其他参考链接：

vue3的选项式API详解?(看这一篇就够了)

vue3官方api