Vue.js 3.0 引入的 Composition API 是一个革命性的特性，它允许开发者以更灵活和模块化的方式组织组件逻辑。

快速概览

  • 响应式系统：使用 ref 和 reactive 来创建响应式数据。
  • 组合式函数：通过 setup 函数组织组件逻辑。
  • 生命周期钩子：新的生命周期钩子如 onMounted、onUnmounted 等。

基础用法

响应式数据

import { ref } from 'vue';

const count = ref(0);

setup 函数

setup 函数是 Composition API 的核心，它接受 props 和 context 作为参数。

export default {
  setup(props, { emit }) {
    // 在 setup 中定义的响应式数据或方法都可以在模板或其它 Composition API 中使用
  }
}

生命周期钩子

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

onUnmounted(() => {
  console.log('组件已卸载');
});

进阶技巧

  • 依赖注入：使用 provide 和 inject 实现跨组件的依赖注入。
  • 自定义指令：使用 directives 选项定义自定义指令。

学习资源

更多关于 Vue.js 3.0 Composition API 的内容，请访问我们的 官方文档。

图片示例

Vue.js Composition API 逻辑结构

Vue_Composition_API_structure

Vue.js Composition API 代码示例

Vue_Composition_API_example