组合式 API - setup

组合式 API

组合式 API 是 Vue 3 中引入的一种新的编程范式，它是基于函数的组件 API，主要包括 setup() 函数。setup() 函数让您可以更灵活地组织组件代码，并且提供了更直观的方式来管理组件的状态、生命周期钩子和其他逻辑。

setup

下面介绍 setup() 函数的基本使用方法以及如何访问 Props、使用 Setup 上下文以及与渲染函数一起使用：

基本使用：

javascript

import { ref, onMounted } from "vue";

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

    onMounted(() => {
      console.log("Component mounted");
    });

    return { count };
  },
};

访问 Props：可以通过 props 参数访问传递给组件的 Props。

javascript

import { ref } from "vue";

export default {
  props: ["initialCount"],

  setup(props) {
    const count = ref(props.initialCount || 0);

    return { count };
  },
};

Setup 上下文：在 setup() 函数中，可以通过第一个参数来访问上下文对象，包括 attrs、slots、emit 等。

javascript

import { ref } from "vue";

export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs);

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots);

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit);

    // 暴露公共属性/方法（当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容）
    console.log(context.expose);
  },
};

与渲染函数一起使用：您可以在 setup() 函数中返回一个包含 render 函数的对象，让您更灵活地控制组件的渲染。

javascript

import { ref, h } from "vue";

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

    const increment = () => {
      count.value++;
    };

    const render = () =>
      h("button", { onClick: increment }, `Count is: ${count.value}`);

    return { count, render };
  },
};

通过组合式 API 的 setup() 函数，可以更好地组织和管理组件代码，实现更好的代码复用和逻辑分离。

组合式 API - setup ​

setup ​

组合式 API - setup

setup