Vue 3.0 组合式API - 程序员自由职业

Vue 3.0 引入了组合式 API，这是一种新的 API 设计范式，旨在使组件更易于理解、维护和测试。组合式 API 由 setup 函数和一组新的函数组成，取代了 Vue 2.x 中的 data、methods、computed 等选项。以下是一些组合式 API 的主要概念和函数：

setup 函数

setup 函数是组合式 API 的入口点，它负责设置组件的初始状态，并返回供模板使用的响应式数据和函数。setup 函数在组件实例创建时执行。

import { ref, reactive, computed, watchEffect } from 'vue';

export default {
  setup() {
    // 响应式数据
    const count = ref(0);
    const data = reactive({
      message: 'Hello, Vue!',
    });

    // 计算属性
    const squared = computed(() => count.value * count.value);

    // 观察副作用
    watchEffect(() => {
      console.log('Count has changed:', count.value);
    });

    // 返回供模板使用的数据和函数
    return {
      count,
      data,
      squared,
      increment: () => {
        count.value++;
      },
    };
  },
};

ref 函数

ref 函数用于创建响应式的基本数据类型（如数字、字符串、布尔等）。

import { ref } from 'vue';

const myVar = ref(42);

console.log(myVar.value); // 输出: 42

reactive 函数

reactive 函数用于创建响应式的对象。

import { reactive } from 'vue';

const myObject = reactive({
  key: 'value',
});

console.log(myObject.key); // 输出: value

computed 函数

computed 函数用于创建计算属性。

import { ref, computed } from 'vue';

const count = ref(1);

const squared = computed(() => {
  return count.value * count.value;
});

console.log(squared.value); // 输出: 1

watch 函数

watch 函数用于监视一个或多个响应式数据的变化。

import { ref, watch } from 'vue';

const count = ref(1);

watch(() => {
  console.log('Count changed:', count.value);
});

这些函数是组合式 API 的核心部分，它们使得组件的逻辑更加模块化和可测试。通过 setup 函数，你可以在组件中使用这些函数来管理状态、计算属性和副作用，提高代码的可读性和可维护性。组合式 API 为构建更复杂的 Vue.js 应用提供了更灵活、强大的工具。

转载请注明出处：http://www.zyzy.cn/article/detail/581/Vue 3.0