作者：依然-狠幸福 | 来源：互联网 | 2022-08-29 02:22
之前的文章我们已经对 vue 有了初步认识，这篇文章我们通过一个例子说一下 vue 的方法 methods，计算属性 compited 和监
之前的文章我们已经对 vue 有了初步认识，这篇文章我们通过一个例子说一下 vue 的方法 methods，计算属性 compited 和监听器 watch。
现在我们有一个需求，变量 firstName = "hello"，变量 lastName = "world"，我们需要将这两个变量拼接到在前端展示，最基本的我们可以想到的就是：
我们在页面加载的时候同时定义了一个 time 的数据，当我们更新这个 time 数据的时候，结果如下：
我们发现当我们更新 time 数据的时候，fullName 方法也调用了一次。这显然不是很理想的。
我们再来看一下利用监听器 watch 方法：
我们在 Vue 实例的 watch 属性里定义了两个方法 firstName 和 lastName，watch 属性中方法名和 data 属性里的数据变量名相同，表示会实时监听该数据的变化，如果监听到变化时会实时更新 DOM。
我们先来看一下当跟 methods 方法那样更新 time 数据时的变化：
我们可以看出当 time 数据更新时并没有调用 firstName 和 lastName 里的数据。当我们更新 firstName 和 lastName 的数据时，结果如下：
我们可以看出当我们更新 firstName 或者 lastName 的数据时，fullName 数据才会更新，这说明当数据挂载到 DOM 上的时候会缓存起来，如果数据不更新，则还会继续使用缓存的数据，当数据更新时才会调用 watch 里面的方法，这就比 methods 的方法要好很多。
我们再来看一下计算属性 computed：
我们可以看出跟 watch 比，我们并没有在 data 里定义 fullName 数据，而是在 computed 属性里直接定义 fullName 然后 return 出 firstName 和 lastName 的拼接结果，当页面呈现时，从输出结果可以看出会走一次计算属性，当我们改变 time 数据时：
可以看出 computed 里的方法没有被调用，当我们改变 firstName 或者 lastName 的数据时，结果如下：
从上面的结果可以看出 computed 里面的方法被调用了，这是我们想要的结果，当跟 fullName 有关的 firstName 和 lastName 数据改变时计算属性才会重新计算，当跟 fullName 无关的 time 数据变化时会用之前缓存的数据，这正是我们想要的结果。
以上三种方法进行比较我们可以得知 methods 方法是最不理想的，监听器 watch 和 计算属性 computed 两种方法的运行结果是一样的，但是 计算属性 computed 方法更简单一些。所以在 watch 和 computed 两种方法都能实现的时候我们更推荐使用 computed 方法。
但是上面的 watch 和 computed 两个方法里有个问题，就是 watch 里我们在 data 里定义了一个 fullName 的数据，当我们在更改 fullName 的值时 DOM 会跟着改变，这个跟 firstName 和 lastName 数据更改是一样的。但是当我们在 computed 里我们并没有定义 fullName，当我们更改 fullName 的数据时，如下：
我们发现 DOM 并没有更新，这跟 watch 比起来就显得不友好了，其实在 computed 里有 get 和 set 两个属性，我们 computed 的 fullName 方法改成如下：
可以看出当我们通过 get 和 set 就可以改变 fullName 的值使 DOM 更新了。当页面更新的时候先触发 fullName 中的 get 方法，并返回 fullName，当我们改变 time 时，fullName 所依赖的 firstName 和 lastName 并没有更改，所以就 fullName 就会去取缓存的值，在 fullName 的 set 方法里可以传一个 value 的参数，通过打印我们可以看出 value 值就是我们直接改变 fullName 的值，我们就可以通过该值来赋值改变 firstName 和 lastName，这样 fullName 所依赖的 firstName 或 lastName 改变时 DOM 就会实时更新了。
以上所述是小编给大家介绍的Vue 进阶之路详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
推荐阅读
本章探讨了数据类型及其操作的基本概念，深入讲解了数据抽象和抽象数据类型的重要性，以及它们如何支持面向对象的编程方式。通过实例展示了字符串复制的不同方法，并讨论了类定义对系统资源的影响。 ...
[详细]
蜡笔小新 2024-11-25 18:31:05
本文深入探讨了MyBatis二级缓存的启用方法及其配置细节，通过具体的代码实例进行说明，有助于开发者更好地理解和应用这一特性，提升应用程序的性能。 ...
[详细]
蜡笔小新 2024-11-25 17:47:13
蜡笔小新 2024-11-25 16:58:20
本文介绍了两个重要的Node.js库——cache-content-type和mime-types，它们在处理HTTP响应头时非常有用。cache-content-type是基于mime-types构建的，并且实现了缓存机制以提高性能。 ...
[详细]
蜡笔小新 2024-11-25 16:51:02
本文转载自某知名技术博客，作者对市场上一些低质量电脑进行了深入分析，指出这些设备存在的问题及其可能带来的影响。 ...
[详细]
蜡笔小新 2024-11-25 15:53:20
本文介绍了如何解决在尝试远程访问服务器时遇到的身份验证错误，特别是当系统提示‘要求的函数不受支持’时的具体解决步骤。通过调整Windows注册表设置，您可以轻松解决这一常见问题。 ...
[详细]
蜡笔小新 2024-11-25 14:15:06
本文旨在探讨如何高效且优雅地记录API接口的调用时长，通过实际案例和代码示例，帮助开发者理解并实施这一技术，提高系统的可观测性和调试效率。 ...
[详细]
蜡笔小新 2024-11-25 17:56:55
本作业探讨了矩阵链乘法的问题，包括问题定义、解析过程、算法设计思路及性能分析。通过将矩阵链分解为多个子问题，旨在找到最小化基本运算次数的方法。 ...
[详细]
蜡笔小新 2024-11-25 17:40:04
本文介绍了一道来自LeetCode的编程题——拼写单词。题目要求从给定的词汇表中找出可以由指定字母表中的字母拼写出的单词，并计算这些单词的总长度。文章将展示如何通过使用数组替代哈希表来提高算法的执行效率。 ...
[详细]
蜡笔小新 2024-11-25 17:16:05
本文介绍如何在宝塔控制面板中通过编辑Nginx配置文件来解决反向代理中的缓存问题，确保每次请求都能从服务器获取最新的数据。 ...
[详细]
蜡笔小新 2024-11-25 16:54:14
本文详细记录了一次在 CentOS 7 系统上遇到的磁盘故障处理过程，主要探讨了因额外磁盘缺失但 fstab 文件中仍保留其挂载配置而导致的问题，并提供了具体的解决方案。 ...
[详细]
蜡笔小新 2024-11-25 16:35:45
本文探讨Node.js模块化的重要性和具体实现方式，包括其带来的代码复用性增强、可维护性提升、以及如何有效避免命名冲突等问题。 ...
[详细]
蜡笔小新 2024-11-25 16:16:46
本文详细介绍了如何使用 Python 编程语言中的 Scapy 库执行 DNS 欺骗攻击，包括必要的软件安装、攻击流程及代码示例。 ...
[详细]
蜡笔小新 2024-11-25 15:52:30
子网掩码主要用于区分IP地址中的网络部分和主机部分，它是网络配置中不可或缺的一部分，需要与IP地址配合使用。 ...
[详细]
蜡笔小新 2024-11-25 15:46:21
为帮助编程爱好者更好地掌握Python和Go语言的核心技能，我们特别提供两本精选图书的免费赠阅机会。《易懂的Python算法指南》适合所有希望提高算法理解能力的读者，《Go语言编程从入门到精通》则面向对Go语言感兴趣的初学者及有一定基础的开发者。 ...
[详细]
蜡笔小新 2024-11-25 15:14:25
京公网安备 11010802041100号