vue3-setup与vue2的data共存

文章目录

• 前言
• 一、vue3的setup
• • • 响应式状态
    • 生命周期钩子
    • 示例
    • 注意事项
• [二、与vue2 的data 共存](#二、与vue2 的data 共存)
• • • [`setup` 与 `data` 的区别](#setup 与 data 的区别)
    • [`setup` 与 `data` 的共存](#setup 与 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: 'Doe'
    });

    // 使用 computed 创建计算属性
    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    // 使用 watch 观察响应式状态的变化
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    // 使用生命周期钩子
    onMounted(() => {
      console.log('Component is mounted!');
    });

    onUnmounted(() => {
      console.log('Component is unmounted!');
    });

    // 返回到模板中使用的值
    return {
      count,
      state,
      fullName
    };
  }
};

在这个示例中，我们使用了 ref、reactive、computed 和 watch 来创建和管理响应式状态，以及使用 onMounted 和 onUnmounted 来处理组件的生命周期。

注意事项

• setup 函数是 Composition API 的入口点，它在组件实例化之前执行。
• setup 函数的参数包括 props 和 context，其中 props 是组件的属性，context 是一个暴露了其他组件上下文的只读对象。
• 在 setup 函数中，this 不再指向当前组件的实例，而是未定义的。

setup 函数为 Vue 3 的组件提供了一种更灵活、更模块化的方式来管理状态和逻辑，使得代码更加清晰和易于维护。

二、与vue2 的data 共存

在 Vue 3 中，setup 函数是 Composition API 的入口点，它用于定义响应式状态和逻辑。虽然 setup 和 data 可以共存于同一个组件中，但它们之间存在一些使用上的差异和限制。

setup 与 data 的区别

1. data ：这是 Vue 2 中引入的选项式 API 的一部分，用于定义组件的响应式数据。在 Vue 3 中，data 仍然可以被使用，但它的作用域和使用方式与 Composition API 有所不同。

2. setup ：这是 Composition API 的核心，提供了更灵活的方式来创建和管理响应式状态。在 setup 内部，你可以使用 ref、reactive、computed 等函数来定义状态。

setup 与 data 的共存

• 访问 data 中的属性 ：在 setup 函数中，你可以通过解构 props 参数来访问 data 中定义的属性。这是因为在 Composition API 中，data 中的属性被暴露为 props。

  setup(props) {
    // 假设在 data 中定义了一个名为 `counter` 的属性
    console.log(props.counter);
  }

• 在模板中使用 ：无论是 data 中的属性还是 setup 中定义的状态，都可以在模板中直接使用。

注意事项

• 组件实例的引用 ：在 setup 函数中，this 关键字不再指向当前组件的实例。因此，你不能直接使用 this 来访问 data 或 methods 中的属性。

• 返回对象 ：在 setup 函数中定义的状态和逻辑，需要通过返回一个对象的方式暴露给组件的其他部分（如模板或 methods）。这样，这些状态和逻辑就可以作为组件的公共状态和方法被访问。

示例

import { ref } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  setup() {
    const count = ref(0); // Composition API 中的响应式状态

    // 返回 count 供模板和其他组件选项使用
    return {
      count
    };
  },
  methods: {
    increment() {
      // 由于不能直接使用 this 访问 setup 中的响应式状态，
      // 你需要在 methods 中使用 setup 返回的状态。
      this.count++; // 访问 data 中的 count
      this.setupState.count++; // 访问 setup 返回的 count
    }
  }
};

在这个示例中，count 在 data 中和 setup 中都被定义了。然而，由于 setup 中的 count 是通过 Composition API 创建的响应式状态，你不能直接在 methods 中使用 this.count 来访问它。相反，你需要使用 setup 返回的状态，这通常通过给组件实例添加一个额外的属性来实现，例如 setupState。

请注意，setupState 是一个示例属性名，实际的属性名取决于你的具体实现。这种方式允许你在 methods 中访问 setup 中定义的状态，同时保持了 Composition API 的响应式特性。

---