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

愚公搬代码

已于 2024-11-02 22:21:11 修改

阅读量4.6w

点赞数 43

分类专栏：愚公系列-书籍专栏文章标签： vue.js 前端前端框架

于 2024-08-26 23:54:42 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/141576275

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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