之前的文章我们已经对 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 进阶之路详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
写下你的评论吧 !推荐阅读
本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]蜡笔小新 2023-12-14 20:58:32
本文介绍了阿里Treebased Deep Match(TDM)的学习笔记，同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法，再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用，并介绍了TDM的背景和优势。最后，文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]蜡笔小新 2023-12-14 19:24:58
本文主要解析了在Lodop中使用特殊符号打印设计和预览样式不同的问题。由于调用的本机ie引擎版本可能不同，导致在不同浏览器下样式解析不同。同时，未指定文字字体和样式设置也会导致打印设计和预览的差异。文章提出了通过指定具体字体和样式来解决问题的方法，并强调了以打印预览和虚拟打印机测试为准。 ... [详细]蜡笔小新 2023-12-14 18:29:32
本文详细介绍了Java中final关键字的含义和用法。final关键字可以修饰非抽象类、非抽象类成员方法和变量。final类不能被继承，final类中的方法默认是final的。final方法不能被子类的方法覆盖，但可以被继承。final成员变量表示常量，只能被赋值一次，赋值后值不再改变。文章还讨论了final类和final方法的应用场景，以及使用final方法的两个原因：锁定方法防止修改和提高执行效率。 ... [详细]蜡笔小新 2023-12-14 18:07:46
本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程，并分析了其所需的资源容量。通过解决错误提示和调整内存大小，成功存储了波形数据。然后，讨论了储存环逐束团信号的意义，以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大，每天需要近250G，一年需要90T。然而，储存环逐束团信号具有重要意义，可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]蜡笔小新 2023-12-14 17:43:56
本文介绍了在Kubernetes上部署JupyterHub的步骤和实验所需的依赖，包括安装Docker和K8s，使用kubeadm进行安装，以及更新下载的镜像等。 ... [详细]蜡笔小新 2023-12-14 20:27:14
文编：byakko最近有部分小伙伴反应还不会使用unity模组管理器，现在我就给大家讲一下unity模组管理器——从下载到使用。完整视频版以下是无WiF ... [详细]蜡笔小新 2023-12-14 20:21:50
依然-狠幸福这个家伙很懒，什么也没留下！Tags | 热门标签RankList | 热门文章
- 1Linux中RPM文件操作的常用命令总结
- 2配置iptables,把80端口转到8080的简单方法
- 3浅谈linux rwxrwxrwt文件夹属性
- 4ubuntu下apache服务器操作方法小结
- 5Linux配置VSFTP服务器的方法
- 6浅谈find命令下的atime,ctime,mtime
- 7linux对文件解压或打包压缩的方法
- 8详解在Ubuntu下搭建FTP服务器
- 9Linux移动文件与目录－mv命令的10个实用例子
- 10Linux线程退出方式总结(推荐)
- 11详解Ubuntu14.04桥接网络设置与SSH登陆
- 12解决Linux程序编译链接动态库版本的相关问题
- 13让Apache 2支持.htaccess并实现目录加密的方法
- 14centos7云主机系统下挂载磁盘的方法
- 15mac上安装ubuntu双系统教程
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有
