【愚公系列】《循序渐进Vue.js 3.x前端开发实践》016-Vue 组件的属性和方法：小结与上机演练

原创

愚公搬代码

发布于 2025-07-02 01:10:34

2080

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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，该组件包含两个按钮和一个显示点击信息的段落。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S14#新手村

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S14#新手村

登录后参与评论

0 条评论

热度