农业建设项目管理信息系统网站永清住房和城乡建设部网站

重生之我在学Vue–第2天 Vue 3 Composition API 与响应式系统

前言

Vue 3 引入了 Composition API，它是一种新的组件逻辑组织方式，旨在解决 Vue 2 中 Options API 难以管理复杂逻辑的问题。通过 Composition API，我们可以更灵活地组织代码、复用逻辑，并充分利用 Vue 3 的响应式系统。

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

---

一、Composition API 核心概念

1.1 什么是 Composition API？

Composition API 是 Vue 3 提供的一组新的 API，用于定义组件的逻辑和状态。它的核心是 setup 函数，所有组件的逻辑都可以在 setup 中定义。

export default {setup() {// 在这里定义组件逻辑return {};},
};

1.2 Composition API 的核心工具

以下是 Composition API 的核心工具和它们的作用：

工具	作用
ref	创建响应式的基本数据类型（如字符串、数字、布尔值）。
reactive	创建响应式的复杂对象（如数组、对象）。
computed	创建基于其他响应式数据的计算属性。
watch	监听响应式数据的变化并执行副作用。
watchEffect	自动追踪响应式数据的依赖并执行副作用。
onMounted	组件挂载时的生命周期钩子。
onUnmounted	组件卸载时的生命周期钩子。
provide/inject	实现跨组件的数据共享（类似 Vue 2 的 provide/inject）。

---

1.3 基础用法示例

以下是一个简单的计数器示例，展示了如何使用 ref 和 onMounted。

<template><div><h1>{{ count }}</h1><button @click="increment">增加</button></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};onMounted(() => {console.log('组件已挂载');});return {count,increment,};},
};
</script>

代码解析：

1. 响应式数据 count：
   • 使用 ref 创建了一个响应式数据 count，初始值为 0。
   • 通过 count.value 可以访问和修改其值。
   • 在模板中，{{ count }} 会自动解包 ref 的值（无需显式加 .value）。
2. 事件绑定：
   • 使用 @click 绑定一个点击事件，当按钮被点击时，执行 increment 方法。
   • increment 方法会将 count 的值加 1，从而触发视图的更新。
3. 生命周期钩子 onMounted：
   • 使用 onMounted 生命周期钩子，在组件挂载到 DOM 后执行一些逻辑。
   • 在这里，console.log('组件已挂载') 会在浏览器控制台输出一条消息，表明组件已成功挂载。

---

二、响应式系统

Vue 3 的响应式系统是其核心特性之一，它通过 Proxy 对数据进行代理，从而实现数据的自动追踪和更新。

2.1 响应式工具

1. ref

• 用于创建基本类型的响应式数据。
• 通过 .value 访问和修改响应式数据。

import { ref } from 'vue';const count = ref(0);
console.log(count.value); // 输出 0
count.value++;
console.log(count.value); // 输出 1

2. reactive

• 用于创建复杂类型（如对象、数组）的响应式数据。
• 不需要通过 .value 访问属性。

import { reactive } from 'vue';const person = reactive({name: 'Alice',age: 25,
});console.log(person.name); // 输出 Alice
person.age++;
console.log(person.age); // 输出 26

3. computed

• 用于创建基于其他响应式数据的计算属性。
• 支持缓存，只有依赖的数据发生变化时才会重新计算。

import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);console.log(doubleCount.value); // 输出 0
count.value++;
console.log(doubleCount.value); // 输出 2

---

2.2 响应式系统的核心原理

Vue 3 的响应式系统基于 ES6 的 Proxy 实现，主要有以下特点：

1. 依赖追踪：当模板或计算属性使用响应式数据时，Vue 会自动追踪数据的依赖。
2. 自动更新：当响应式数据发生变化时，Vue 会自动更新依赖该数据的视图。
3. 懒加载：计算属性和 watch 会在需要时才执行。

---

2.3 响应式数据的监听

1. 使用 watch

watch 用于监听响应式数据的变化，并执行副作用。

import { ref, watch } from 'vue';const count = ref(0);watch(count, (newVal, oldVal) => {console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});count.value++; // 输出：count 从 0 变为 1

2. 使用 watchEffect

watchEffect 会自动追踪响应式数据的依赖，并在数据变化时重新执行。

import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(`count 的值是：${count.value}`);
});count.value++; // 输出：count 的值是：1

---

三、案例实践：Todo 应用

以下是一个简单的 Todo 应用，使用 Composition API 和 Vue 3 的响应式系统。

功能

1. 添加任务。
2. 删除任务。
3. 显示任务列表。

代码实现

<template><div><h1>Todo 应用</h1><input v-model="newTask" placeholder="输入任务" /><button @click="addTask">添加任务</button><ul><li v-for="(task, index) in tasks" :key="index">{{ task }}<button @click="removeTask(index)">删除</button></li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {const newTask = ref('');const tasks = ref([]);const addTask = () => {if (newTask.value.trim()) {tasks.value.push(newTask.value.trim());newTask.value = '';}};const removeTask = (index) => {tasks.value.splice(index, 1);};return {newTask,tasks,addTask,removeTask,};},
};
</script><style>
h1 {font-size: 24px;margin-bottom: 20px;
}
input {padding: 5px;margin-right: 10px;
}
button {padding: 5px 10px;
}
ul {list-style: none;padding: 0;
}
li {margin: 10px 0;display: flex;align-items: center;
}
</style>

---

代码解析：

1. 响应式数据

• 使用ref创建了两个响应式数据：
  • newTask：绑定到输入框，用于存储用户输入的任务内容。
  • tasks：存储任务列表的数组。

2. 添加任务功能

• 方法addTask：
  • 检查 newTask 是否为空，避免添加空任务。
  • 使用 trim() 去除多余的空格。
  • 如果输入合法，将任务添加到 tasks 数组中，并清空输入框。

3. 删除任务功能

• 方法removeTask：
  • 使用 splice 方法根据索引删除指定的任务。

4. 列表渲染

• 使用 v-for 遍历 tasks 数组，将每个任务渲染为一个列表项。
• 使用 :key="index" 为每个列表项设置唯一的键，确保 Vue 能正确地追踪列表的变化。

5. 双向绑定

• 使用 v-model 将输入框的值绑定到 newTask，实现双向数据绑定。

  • 使用 trim() 去除多余的空格。
  • 如果输入合法，将任务添加到 tasks 数组中，并清空输入框。