vue3-setup与vue2的data共存

---

前言

vue3 setup 学习

---

一、vue3的setup

Vue 3 的 setup 函数是 Composition API 的核心，它提供了一种新的方式来使用 Vue 的响应式系统和生命周期钩子。setup 函数是 Composition API 的入口点，它允许开发者以声明式的方式定义组件的状态和逻辑，而不是使用 Vue 2 中的 data、computed、watch 和 methods 等选项式 API。

以下是 setup 函数的一些关键特性和用法：

响应式状态

• ref：用于创建响应式的基本类型（如 number、string、boolean 等）。
• reactive：用于创建响应式的复杂类型（如 Object 或 Array）。
• computed：用于创建一个计算属性，只有当依赖发生变化时才会重新计算。
• watch：用于观察响应式状态的变化，当状态变化时执行回调函数。

生命周期钩子

• onMounted：组件挂载完成后执行。
• onUpdated：组件更新完成后执行。
• onUnmounted：组件卸载后执行。

示例

import {
    ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue';

export default {
   
  setup() {
   
    // 使用 ref 创建响应式的基本类型
    const count = ref(0);

    // 使用 reactive 创建响应式的复杂类型
    const state = reactive({
   
      firstName: 'John',
      lastName<