前端进阶：vue中的computed和watch的异同_車句的博客-程序员宅基地

技术标签： computed与watch异同 computed和watch 前端进阶 vue computed与watch有什么不同

原文链接

前言

心情很忐忑，当我写下这个标题。想起年初时在杭州求职，电面了一家武汉的公司，面试官就抛了这样一个问题。那时候还懵懵懂懂，就知道如何使用，并没有太清楚两者的区别。

开始

有时候写这些东西，真的怕误导了一些人，以下描述的异同，只是我个人的观点。如果有什么不当之处，还望各位博友指出~感谢

最近研究vue.js数据双向绑定的原理，看了一些很好的文章，自己也跟着敲了几遍代码。又开始思考computed和watch两者的异同。

实践

随着学习的深入，也接触到一些前辈，可以真真切切感受到自己于他们的差距。坚持...坚持...努力，希望自己有一天也能给别人一些指引和方向~

先上一张图，原文已经被删了，这是我从百度快照截取的：

百度快照

这是一方面，总结一下：当我们某一个值依赖于多个值时，建议使用computed，其中任何一个值变化时，该值都能及时更新；当我们一个值被多个值依赖时，建议使用watch，当这个值变化时，所有依赖它的值都会及时更新。（可能有些绕，但是要理解清楚，图片更清晰）

既然这只是一方面，那么另一方面是什么呢？

让我们回到官方的文档，万变不离其宗。我们最初学习是看文档，遇到问题时，最好的还是回来看看文档。

官方文档

注意，这段描述有两个点，方法+数据变化。

通常我们都是在computed和watch中，根据依赖的值得变化，直接修改其他的值（比如更新data中的数据）。但是如果我们要在一个值变化时做一些其他的操作，应该怎么办呢？

第2点区别

是的。这才是他们最根本的区别，现在看看文档已经描述得如此的简单明了。 当依赖的值变化时，在watch中，是可以做一些复杂的操作的，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。

总结

有时候我们忙于业务，很难停下来看看它的原理。但是现在我却很享受这种探索的过程，一步一步翻越高山~翻过去，高山便不再是高山，远方依然是远方。

嘘寒问暖不如打笔巨款~

本文链接：https://blog.csdn.net/weixin_39015132/article/details/83310726

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java 泛型中? extends 、? super简单理解_? extends? super_xian_yu_wan的博客-程序员宅基地

public class Person {} // 超类public class Male extends Person {}public class Female extends Person {}public class Boy extends Male {}public class Gril extends Female {}就这？就这！List<Male> males = new ArrayList<Boy>();List<Boy._? extends? super

oracle数据库显示连接编程,《Oracle数据库编程笔记》之10-01：连接-程序员宅基地

本章内容主要讲解多表查询，知识点和学习目标如下：1、笛卡尔积2、等值连接3、非等值连接4、自连接5、自然连接6、N路连接7、交叉连接9、连接类型示意图1、笛卡尔积笛卡尔集是倍数关系。笛卡尔集会在下面条件下产生:省略连接条件连接条件无效所有表中的所有行互相连接注意：为了避免笛卡尔集，需要在 WHERE 加入有效的连接条件。/*主题：笛卡尔集作者：AT阿宝哥日期：2016年9月18日说明：*/---...

Swing之JTable篇综合例子，在表中插入一行记录，对表列排序等-程序员宅基地

通过实现AbstractTableModel接口实现即使向表中增加一行记录 import java.awt.BorderLayout; import java.awt.Point; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.Co

计算机网络教研活动讨论,创新教研活动形式，开展网络教研。是提高教师有效...-程序员宅基地

创新教研活动形式，开展网络教研。是提高教师有效技能的重要途径。金桥学区中心学校《有效技能》课题组成员刘刚在当前教育信息化迅猛发展的背景下，网络教研平台以其良好的开放性、互动性，在促进和改革学校的常规教研工作，改革传统的教师培训和学习方式，提供更多层面上的教学支援、同伴互助、师生研讨和专业引领，促使教师不断地更新观念、自我反思和自主发展，以及提升校本研究质量等方面，起到了重要而明显的促进作用，得到...

java 服务器框架_最热门的 10 个 Java 微服务框架_汽车大侦探东门的博客-程序员宅基地

1、Spring BootJava 构建 Spring 应用程序已经有很长一段时间了，Spring Boot 是 Spring 的一个特定版本，它通过对配置细节的处理，使微服务构建更加简便。创建 Spring Boot 旨在自启动任何类型的 Spring 项目，而不仅仅是微服务。应用程序完成后，Spring Boot 将在 web 服务器中混合，并输出一个 JAR 文件，JVM 除外。你可以将其视..._java 卖服务器免费的框架

iOS Stream-程序员宅基地

流流是二进制数据串在端与端之间的传输。在 Cocoa 中提供了 NSStream 、NSInputStream 、NSOutputStream 三个类来实现数据通过流的方式在文件、内存、网络之间的传输。NSStream 是一个抽象类，它是 NSInputStream 和 NSOutputStream 类的父类。NSInputStream 是输入流，流中的数据可能来自本地文件，也可能来自网络

随便推点

2020～2021学年第一学期《NOSQL数据库技术》期末考试试卷_nosql题目-程序员宅基地

2020～2021学年第一学期《NOSQL数据库技术》期末考试试卷一、Studb库中的数据集合Student中的文档如下图。根据文档内容写出解决以下问题的命令，(其中SNO为学号，SNAME为姓名，DEPT为系,SEX为性别，AGE为年龄，CREDIT 为学分，REMARKS 为备注)。(每小题3分，共60分)1.创建一个集合Student。use Studb;db.createCollection(“Student”);2.在Student集合中添加一个学生文档: SNO:“001244"_nosql题目

关于CenterNet Regress Focal Loss的一点理解_centernet中的heatmap中的r是什么?_踌躇不前的小象的博客-程序员宅基地

论文：Objects as Points论文链接：https://arxiv.org/abs/1904.07850代码链接：https://github.com/xingyizhou/CenterNet本文主要讲解CenterNet的Regress Focal Loss，由热图部分(heatmap loss)、偏置部分（reg loss）、宽高(wh loss)部分三部分loss组成，附代码实现。1.heatmap loss输入图像∈, W为图像宽度，H为图像高度。网络输出的关键点热图h.._centernet中的heatmap中的r是什么?