【愚公系列】《循序渐进Vue.js 3.x前端开发实践》021-关于Vue应用
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代前端开发中，组件化的设计理念已经成为构建复杂应用的主流方法。Vue.js 作为一款灵活且高效的前端框架，以其简洁的 API 和强大的组件系统，帮助开发者更轻松地构建可维护、可扩展的用户界面。本篇文章将深入探讨 Vue 应用中的组件概念，帮助你更好地理解和运用这一强大的特性。
我们将从基本的组件定义入手，探讨如何创建和使用 Vue 组件，并了解组件之间的通信方式，包括父子组件的 props 和事件传递。同时，我们还将介绍 Vue 组件的生命周期，以及如何利用插槽（slot）实现更灵活的布局。这些知识将为你在构建复杂的 Vue 应用时提供坚实的基础。
🚀一、Vue应用的创建
🔎1.HTML 结构解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue应用</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<button @click="click">单击</button>
{{ countString }}
</div>
</body>
</html>
🦋1.1 结构功能说明
-
<div id="Application">：- Vue 应用的挂载点，所有的动态数据绑定和事件都在这里生效。
- 包含一个按钮和一个显示计数器的动态文本。
-
<button @click="click">单击</button>：- 一个按钮，绑定了
click方法，用户点击时触发click方法来递增计数。
- 一个按钮，绑定了
-
{{ countString }}：- 使用 Vue 模板语法，动态显示
countString的值。 countString是一个计算属性，用于格式化计数的显示（如“1次”、“2次”等）。
- 使用 Vue 模板语法，动态显示
🔎2.JavaScript (Vue 3) 部分解析
🦋2.1 代码结构
const { createApp, ref, computed, watch } = Vue;
const config = {
setup() {
const data = ref({
count: 0
});
const countString = computed({
get() {
return data.value.count + "次";
}
});
const click = () => {
data.value.count += 1;
};
watch(
data,
(value, oldValue) => {
console.log(value, oldValue);
},
{ deep: true, once: true }
);
return { data, click, countString };
}
};
const App = createApp(config);
App.mount("#Application");
🦋2.2 关键部分解析
☀️2.2.1 Vue 的 setup 方法
- Vue 3 的组合式 API 的入口函数，初始化组件数据、方法和生命周期钩子。
- 返回的对象
{ data, click, countString }将绑定到模板中，可以直接在模板里使用这些数据和方法。
☀️2.2.2 ref 定义响应式数据
const data = ref({
count: 0
});
ref用来定义响应式数据，这里是一个对象，包含一个属性count。data.value是响应式对象的实际值，必须通过.value访问和修改。
☀️2.2.3 computed 定义计算属性
const countString = computed({
get() {
return data.value.count + "次";
}
});
- 定义了一个计算属性
countString，实时计算data.value.count的值，并拼接"次"字符串。 - 当
data.value.count发生变化时，countString会自动更新。
☀️2.2.4 click 方法
const click = () => {
data.value.count += 1;
};
- 定义了一个方法
click，用于递增data.value.count。 - 每次点击按钮时触发
click方法，修改响应式数据data.value.count，从而触发视图更新。
☀️2.2.5 watch 监听响应式数据
watch(
data,
(value, oldValue) => {
console.log(value, oldValue);
},
{ deep: true, once: true }
);
watch用于监听响应式数据的变化，这里监听了data。- 参数：
value：新的数据值。oldValue：旧的数据值。
- 选项配置：
deep: true：深度监听，用于监听对象内部所有属性的变化。once: true：仅监听一次变化后就自动停止监听。
☀️2.2.6 Vue 应用的挂载
const App = createApp(config);
App.mount("#Application");
- 创建 Vue 应用实例，并将其挂载到
id="Application"的 DOM 节点。
🔎3.运行逻辑说明
-
初始状态：
data.value.count为0。- 通过
countString显示为"0次"。
-
按钮点击：
- 点击按钮触发
click方法，data.value.count自增 1。 countString自动更新，并显示为"1次"、"2次"等。watch监听到data.value.count的变化，输出新旧值到控制台。
- 点击按钮触发
-
监听行为：
watch在count第一次变化时触发，输出新旧值，然后停止监听（由于配置了once: true）。
🔎4.代码特点和优点
-
响应式数据驱动：
- 使用
ref定义响应式数据，配合computed和模板语法，实现了数据驱动的动态更新。
- 使用
-
计算属性：
- 使用
computed轻松实现了对原始数据的格式化和派生计算。
- 使用
-
监听机制：
- 使用
watch监听数据变化，实现了对数据变化的观察和日志输出。
- 使用
-
组合式 API：
- 利用 Vue 3 的组合式 API，使得逻辑更加清晰和模块化，易于扩展。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）