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

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

原文链接

前言

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

开始

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

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

实践

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

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

百度快照

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

既然这只是一方面,那么另一方面是什么呢?

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

官方文档

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

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

第2点区别

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

总结

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

嘘寒问暖 不如打笔巨款~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39015132/article/details/83310726

智能推荐

非计算机专业的伟伯是如何拿到阿里Offer的。励志!_阿里巴巴招非编程么_zhousenshan的博客-程序员宅基地

写在前面 : 2015 年 7 月初,参加阿里巴巴校招内推, 8 月 15 日拿到研发工程师 JAVA 的 offer 。我的专业并非计算机,也没有在互联网公司实习过,只有一些学习和面试心得,供大家参考。阿里巴巴 90%以上使用 Java ,所以下面的分享也基于 Java 岗,如有表达不准确的地方,请提出建议和指正。7 月上旬投递简历, 7 月 27 号至 29 号连续三天,每天一面,在 _阿里巴巴招非编程么

Python开发进阶——数据集处理与机器学习初步_邵华成的博客-程序员宅基地

科学家将研究数据集共享给其他研究人员使用,同时也期待数据有助于解决某些重要问题。其中之一的免费资源就是加利福尼亚州欧文分校的机器学习数据仓库(http://archive.ics.uci.edu/ml)。本文采取了其中一个乳腺癌患者身上切除肿瘤的数据集(breast-cancer-wisconsin.data),读者可自行前往下载。肿瘤学家研究切片组织并描述组织的各种特征,并决定肿瘤是良性还是

计算机等级模拟题库二三级(免费免积分)_免费二,三级。_阳宗德的博客-程序员宅基地

作者亲测:二级MS Office超级模拟软件:https://pan.baidu.com/s/187PqXKmghQTe_cf67Ar31w二级C语言程序设计超级模拟软件:https://pan.baidu.com/s/1ZrJO8UwawfWJqPcjI9uu6w三级数据库:https://pan.baidu.com/s/1MDm5dgrV1M1si3PPVytfGg未来教育考试系..._免费二,三级。

pyppeteer.errors.TimeoutError: Navigation Timeout Exceeded: 30000 ms exceeded._playwright._impl._api_types.timeouterror: timeout _Sareyer的博客-程序员宅基地

添加 timeout 参数await page.goto(url, timeout=10000000)_playwright._impl._api_types.timeouterror: timeout 30000ms exceeded.

英伟达Jeston nano<1> 基本配置问题及解决方案_jetson nano 电流设置_GRF-Sunomikp31的博客-程序员宅基地

Jeston nano<1> 基本配置问题解决方案前言Jeston nano供电问题Jeston nano网络配置问题Jeston nano风扇问题及设置开启自启开启风扇设置开机自启前言Jeston nano供电问题提示:这里可以添加学习目标例如:一周掌握 Java 入门知识Jeston nano网络配置问题提示:这里可以添加要学的内容例如:1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句Jeston nano风扇问题及_jetson nano 电流设置

《DNS攻击防范科普系列1》—你的DNS服务器真的安全么?_服务器,直接不设置dns,还能被攻击吗_Ta oo的博客-程序员宅基地

DNS服务器,即域名服务器,它作为域名和IP地址之间的桥梁,在互联网访问中,起到至关重要的作用。每一个互联网上的域名,背后都至少有一个对应的DNS。对于一个企业来说,如果你的DNS服务器因为攻击而无法使用,整个企业的网站、邮箱、办公系统将全部瘫痪,这意味着对你造成的是成千上万个用户的不可访问,将产生不可估量的影响。你的DNS服务器是否受到过安全威胁,它现在真的安全么?DNS面临着各种各样的网络..._服务器,直接不设置dns,还能被攻击吗

随便推点

python稀疏矩阵sparse matrix的保存和读取_aoheng0603的博客-程序员宅基地

from scipy import sparsesparse.save_npz('./filename.npz', csr_matrix_variable) #保存csr_matrix_variable = sparse.load_npz('path.npz') #读参考:https://blog.csdn.net/weixin_36218261/artic...

springBoot mybatis 包扫描_小贺学习笔记的博客-程序员宅基地

@MapperScan(basePackages = {"com.zscat.*.dao","com.zscat.*.*.dao"})@EnableTransactionManagement(proxyTargetClass = true)@SpringBootApplication@MapperScan(basePackages = {"com.zscat.*.dao","com...

Javascript高级编程学习笔记(29)—— BOM(3)location对象-程序员宅基地

在JS中location是一个神奇的对象它既是window对象的属性,也是document对象的属性它的作用主要在于保存当前文档页面的信息,以及将 url 解析为独立的片段location对象属性1、hash  返回url中的 #后面的0个或多个字符,若 url 不包含#则返回空字符串2、host  返回url中的服务器名称和端口号 如“localhost:80...

Microsoft JScript 运行时错误_weixin_33972649的博客-程序员宅基地

Microsoft JScript 运行时错误: Sys.WebForms.PageRequestManagerServerErrorException: 回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验...

PTA 7-17 成绩转换_拼题a7-17 成绩转换_lemon- lemon的博客-程序员宅基地

本题要求编写程序将一个百分制成绩转换为五分制成绩。转换规则:大于等于90分为A; 小于90且大于等于80为B; 小于80且大于等于70为C; 小于70且大于等于60为D; 小于60为E。输入格式:输入在一行中给出一个整数的百分制成绩。输出格式:在一行中输出对应的五分制成绩。输入样例:90结尾无空行输出样例:A结尾无空行#include <stdio.h>int main (){ int grade; scanf("%_拼题a7-17 成绩转换

推荐文章

热门文章

相关标签