【愚公系列】《循序渐进Vue.js 3.x前端开发实践》016-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 作为一款功能强大的前端框架，其组件的属性和方法为开发者提供了丰富的功能和灵活性。在前面的学习中，我们深入探讨了 Vue 组件的多种特性，包括数据绑定、事件处理、样式绑定等，这些都是构建高效应用的基础。
本文将对之前的内容进行小结，帮助大家理清 Vue 组件的核心概念，并巩固所学知识。同时，我们还将通过实际的上机演练，带领大家动手实践，加深对 Vue 组件属性和方法的理解。通过一系列的练习，我们希望能够提升大家的实际操作能力，让你在真实项目中游刃有余。
🚀一、小结与上机演练
🔎1.Vue.js 3.x中计算属性和普通属性有何区别?
在 Vue.js 3.x 中，计算属性（computed properties）和普通属性（data properties）都有各自的用途和特点。以下是它们之间的主要区别和用法：
🦋1.1 普通属性 (Data Properties)
普通属性是存储在组件实例中的响应式数据。它们通常在 data 选项或 setup 函数中定义。当这些数据发生变化时，依赖这些数据的模板会自动更新。
定义和使用方式：
在 Vue 2.x 中：
new Vue({
data: {
message: 'Hello World'
}
});
在 Vue 3.x 中使用 setup 函数：
const { ref } = Vue;
const App = {
setup() {
const message = ref('Hello World');
return { message };
}
};
特点：
- 直接用于存储和操作数据。
- 变化时会触发依赖它们的模板重新渲染。
🦋1.2 计算属性 (Computed Properties)
计算属性是基于响应式数据的值计算出来的属性。它们通常用于对数据进行派生计算，并且具有缓存功能：只有当依赖的数据发生变化时，计算属性的值才会重新计算。
定义和使用方式：
在 Vue 2.x 中：
new Vue({
data: {
number: 1
},
computed: {
doubleNumber() {
return this.number * 2;
}
}
});
在 Vue 3.x 中使用 setup 函数和 computed 方法：
const { ref, computed } = Vue;
const App = {
setup() {
const number = ref(1);
const doubleNumber = computed(() => number.value * 2);
return { number, doubleNumber };
}
};
特点：
- 适用于基于其他数据派生出新的数据。
- 具有缓存功能，只有在依赖的响应式数据发生变化时才会重新计算。
- 在模板中可以像普通属性一样使用，但实际上是方法调用。
🦋1.3 区别总结
-
定义方式和用途：
- 普通属性：用于存储和操作基本数据。
- 计算属性：用于根据其他数据计算出新的值，具有缓存特性。
-
性能：
- 普通属性：每次访问时都会获取当前值。
- 计算属性：只有在依赖的数据改变时才会重新计算，访问时使用缓存的值，有助于性能优化。
-
使用场景：
- 普通属性：适用于存储和直接操作的数据。
- 计算属性：适用于依赖于其他数据的派生计算。
🦋1.4 示例
以下是一个完整的 Vue 3.x 示例，展示了普通属性和计算属性的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Example</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Number: {{ number }}</p>
<p>Double Number: {{ doubleNumber }}</p>
<button @click="number++">Increment</button>
</div>
<script>
const { createApp, ref, computed } = Vue;
const App = {
setup() {
const number = ref(1);
const doubleNumber = computed(() => number.value * 2);
return {
number,
doubleNumber
};
}
};
createApp(App).mount('#app');
</script>
</body>
</html>
在这个例子中：
number是一个普通属性，用于存储当前的数字。doubleNumber是一个计算属性，始终是number的两倍，并且只在number改变时重新计算。
🔎2.属性侦听器的作用是什么?
属性侦听器（Watchers or Watch Properties）在 Vue.js 中用于观察和响应数据的变化。它们允许开发者在数据发生变化时执行自定义逻辑，是处理复杂数据变动场景的一种工具。
🦋2.1 属性侦听器的作用
- 响应数据变化：当某个数据属性发生变化时执行特定的操作，比如调用 API、更新其他数据属性、执行某些副作用等。
- 处理复杂逻辑：适用于那些无法通过计算属性轻松实现的复杂逻辑或异步操作。
- 监控多个数据源：可以同时监听多个数据源的变化，并根据变化执行特定的操作。
🦋2.2 使用场景
- 异步操作：比如当用户输入数据时，可以监听输入的变化，并在变化后触发一个异步请求来获取相关数据。
- 数据同步：当某个数据变化时，自动更新其他相关数据以保持同步。
- 副作用管理：在数据变化时执行副作用，比如日志记录、动画触发等。
🦋2.3 例子
以下是一个在 Vue.js 3.x 中使用属性侦听器的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Watch Example</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input v-model="searchQuery" placeholder="Type to search...">
<p>Search Results: {{ searchResults }}</p>
</div>
<script>
const { createApp, ref, watch } = Vue;
const App = {
setup() {
const searchQuery = ref('');
const searchResults = ref('');
// 模拟一个异步搜索函数
function fetchSearchResults(query) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`Results for: ${query}`);
}, 500); // 模拟网络延迟
});
}
// 监听 searchQuery 的变化
watch(searchQuery, async (newQuery) => {
if (newQuery) {
searchResults.value = 'Loading...';
searchResults.value = await fetchSearchResults(newQuery);
} else {
searchResults.value = '';
}
});
return {
searchQuery,
searchResults
};
}
};
createApp(App).mount('#app');
</script>
</body>
</html>
解释
-
数据定义：
searchQuery是一个响应式变量，绑定到输入框。searchResults用于显示搜索结果。
-
属性侦听器：
- 使用
watch函数监听searchQuery的变化。 - 当
searchQuery改变时，首先将searchResults设置为 “Loading…”，然后调用fetchSearchResults模拟一个异步搜索操作，最后将结果更新到searchResults。
- 使用
watch 选项的详细用法
在 Vue 3.x 中，除了使用 setup 函数中的 watch 方法，还可以在组件选项中使用 watch 选项来定义侦听器。这在 Vue 2.x 和 3.x 中都有类似的用法。
const App = {
data() {
return {
searchQuery: '',
searchResults: ''
};
},
watch: {
async searchQuery(newQuery) {
if (newQuery) {
this.searchResults = 'Loading...';
this.searchResults = await fetchSearchResults(newQuery);
} else {
this.searchResults = '';
}
}
}
};
watch 函数的选项
watch 函数可以接收第三个参数，用于配置一些选项，比如 immediate 和 deep。
watch(searchQuery, (newQuery) => {
// 处理逻辑
}, { immediate: true, deep: true });
- immediate：在侦听器创建时立即执行回调。
- deep：深度监听，适用于对象嵌套属性的变化。
🚀二、创建一个简单的 Vue 模板
任务需求整理
- 创建一个 Vue 应用：展示一个包含两个按钮的组件。
- 按钮功能：
- 当用户单击第一个按钮时，显示提示信息“Button 1 clicked!”。
- 当用户单击第二个按钮时，显示提示信息“Button 2 clicked!”。
参考练习步骤
- 创建一个新的 HTML 文件，并引入 Vue 库。
- 在 HTML 文件中，创建一个
<div>元素，id属性设置为app，作为 Vue 应用的挂载点。 - 在
<script>标签内，创建一个 Vue 实例，并定义message变量。 - 创建一个名为
MyComponent的 Vue 组件，并在其中定义两个按钮。 - 为每个按钮添加事件监听器，当单击时调用相应的方法。
- 在
MyComponent组件中，定义两个方法button1Clicked和button2Clicked，用于处理按钮单击事件。 - 运行你的 Vue 应用，查看结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Component Attributes and Methods</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 创建 Vue 应用的挂载点 -->
<div id="app">
<!-- 使用Vue组件 -->
<my-component></my-component>
</div>
<script>
const { createApp, ref } = Vue;
// 定义主应用
const App = {};
// 创建 MyComponent 组件
const MyComponent = {
template: `
<div>
<button @click="button1Clicked">Button 1</button>
<button @click="button2Clicked">Button 2</button>
<p>{{ message }}</p>
</div>
`,
setup(props, { emit }) {
const message = ref('');
const button1Clicked = () => {
message.value = 'Button 1 clicked!';
};
const button2Clicked = () => {
message.value = 'Button 2 clicked!';
};
return {
message,
button1Clicked,
button2Clicked
};
}
};
// 创建并挂载 Vue 实例到 DOM 元素上
createApp(App).component('my-component', MyComponent).mount('#app');
</script>
</body>
</html>
解析：
-
HTML 结构与头部信息：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue Component Attributes and Methods</title> <!-- 引入Vue库 --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body><!DOCTYPE html>: 定义文档类型为 HTML5。<html lang="en">: 定义 HTML 文档的语言为英语。<head>部分包含了文档的元数据，例如字符编码和视口设置。<meta charset="UTF-8">: 设置文档的字符编码为 UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，使页面在各种设备上显示良好。<title>: 设置页面标题。<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>: 引入 Vue 3 库。
-
Vue 应用挂载点：
<div id="app"> <!-- 使用Vue组件 --> <my-component></my-component> </div><div id="app">: 定义一个挂载 Vue 应用的 DOM 元素。<my-component></my-component>: 使用自定义的 Vue 组件my-component。
-
Vue 组件与实例：
<script> const { createApp, ref } = Vue; // 定义主应用 const App = {}; // 创建 MyComponent 组件 const MyComponent = { template: ` <div> <button @click="button1Clicked">Button 1</button> <button @click="button2Clicked">Button 2</button> <p>{{ message }}</p> </div> `, setup(props, { emit }) { const message = ref(''); const button1Clicked = () => { message.value = 'Button 1 clicked!'; }; const button2Clicked = () => { message.value = 'Button 2 clicked!'; }; return { message, button1Clicked, button2Clicked }; } }; // 创建并挂载 Vue 实例到 DOM 元素上 createApp(App).component('my-component', MyComponent).mount('#app'); </script>const { createApp, ref } = Vue;: 从 Vue 库中解构出createApp和ref方法。const App = {};: 定义一个空的主应用对象。const MyComponent = { ... }: 定义一个名为MyComponent的组件。template: 定义组件的模板，其中包含两个按钮和一个显示消息的段落<p>。setup(props, { emit }): Vue 3 的组合式 API，定义组件的逻辑。const message = ref('');: 创建一个响应式引用message，初始值为空。const button1Clicked = () => { ... }: 定义button1Clicked方法，点击时会更新message的值。const button2Clicked = () => { ... }: 定义button2Clicked方法，点击时会更新message的值。return { ... }: 返回组件模板中使用的数据和方法。
createApp(App).component('my-component', MyComponent).mount('#app');: 创建一个 Vue 应用实例，注册MyComponent组件，并挂载到#app元素上。
这样，这段代码创建了一个简单的 Vue 应用，包含一个自定义组件 my-component，该组件包含两个按钮和一个显示点击信息的段落。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）