重庆微信企业网站,做网站后端的全部步骤,榆林市城乡建设规划局网站,江门企业网站建设公司重生之我在学Vue–第2天 Vue 3 Composition API 与响应式系统 文章目录 重生之我在学Vue--第2天 Vue 3 Composition API 与响应式系统前言一、Composition API 核心概念1.1 什么是 Composition API#xff1f;1.2 Composition API 的核心工具1.3 基础用法示例 二、响应式系统2…重生之我在学Vue–第2天 Vue 3 Composition API 与响应式系统 文章目录 重生之我在学Vue--第2天 Vue 3 Composition API 与响应式系统前言一、Composition API 核心概念1.1 什么是 Composition API1.2 Composition API 的核心工具1.3 基础用法示例 二、响应式系统2.1 响应式工具1. ref2. reactive3. computed 2.2 响应式系统的核心原理2.3 响应式数据的监听1. 使用 watch2. 使用 watchEffect 三、案例实践Todo 应用功能代码实现 前言
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。
templatedivh1{{ count }}/h1button clickincrement增加/button/div
/templatescript
import { ref, onMounted } from vue;export default {setup() {const count ref(0);const increment () {count.value;};onMounted(() {console.log(组件已挂载);});return {count,increment,};},
};
/script代码解析
响应式数据 count 使用 ref 创建了一个响应式数据 count初始值为 0。通过 count.value 可以访问和修改其值。在模板中{{ count }} 会自动解包 ref 的值无需显式加 .value。 事件绑定 使用 click 绑定一个点击事件当按钮被点击时执行 increment 方法。increment 方法会将 count 的值加 1从而触发视图的更新。 生命周期钩子 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); // 输出 12. reactive
用于创建复杂类型如对象、数组的响应式数据。不需要通过 .value 访问属性。
import { reactive } from vue;const person reactive({name: Alice,age: 25,
});console.log(person.name); // 输出 Alice
person.age;
console.log(person.age); // 输出 263. 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); // 输出 22.2 响应式系统的核心原理
Vue 3 的响应式系统基于 ES6 的 Proxy 实现主要有以下特点
依赖追踪当模板或计算属性使用响应式数据时Vue 会自动追踪数据的依赖。自动更新当响应式数据发生变化时Vue 会自动更新依赖该数据的视图。懒加载计算属性和 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 变为 12. 使用 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 的响应式系统。
功能
添加任务。删除任务。显示任务列表。
代码实现
templatedivh1Todo 应用/h1input v-modelnewTask placeholder输入任务 /button clickaddTask添加任务/buttonulli v-for(task, index) in tasks :keyindex{{ task }}button clickremoveTask(index)删除/button/li/ul/div
/templatescript
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,};},
};
/scriptstyle
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代码解析
响应式数据
使用ref创建了两个响应式数据 newTask绑定到输入框用于存储用户输入的任务内容。tasks存储任务列表的数组。
添加任务功能
方法addTask 检查 newTask 是否为空避免添加空任务。使用 trim() 去除多余的空格。如果输入合法将任务添加到 tasks 数组中并清空输入框。
删除任务功能
方法removeTask 使用 splice 方法根据索引删除指定的任务。
列表渲染
使用 v-for 遍历 tasks 数组将每个任务渲染为一个列表项。使用 :keyindex 为每个列表项设置唯一的键确保 Vue 能正确地追踪列表的变化。
双向绑定 使用 v-model 将输入框的值绑定到 newTask实现双向数据绑定。 使用 trim() 去除多余的空格。如果输入合法将任务添加到 tasks 数组中并清空输入框。
