vue中watch与computed区别

已于 2023-03-06 14:19:51 修改
阅读量83 收藏
点赞数 1
分类专栏： vue 文章标签： 前端 vue.js 前端框架 Powered by 金山文档
于 2023-03-03 16:37:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CFSBD/article/details/129322981
版权
computed是Vue中用于创建基于其他属性计算的新属性的特性，它有缓存机制，只有依赖改变时才更新。而watch更像是一种监听器，当被监视的数据变化时，会触发回调执行相应操作，watch支持异步处理。
摘要由CSDN通过智能技术生成

computed：

计算属性，依赖其他属性，如果其他属性没有改变，值不变。支持缓存，不支持异步数据

watch

更多起到观察作用，每当监听的数据变化，都会执行回调进行后续操作。不支持缓存，支持异步数据

CFSBD
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中 watch 跟 computed 的区别
欢迎投稿
10-28 342
vue中watch跟computed的区别
Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue中watch和computed的区别
qq_44011569的博客
04-12 210
1. 计算属性（`computed`）：计算属性会根据它所依赖的数据动态计算出一个新的属性值，并缓存这个属性值，当计算属性所依赖的数据发生变化时，计算属性会重新计算。计算属性通常用于将多个属性的计算逻辑抽象出来，以提高代码的可读性和可维护性。 2. 观察属性（`watch`）：观察属性会观察一个数据的变化，并在数据发生变化时执行一个回调函数。观察属性通常用于监控一个数据的变化，并在变化时执行一些副作用的操作，例如调用接口、更新数据等。
vue中的watch与computed的区别
libingjiedd的博客
04-10 438
当 computed 属性的属性值是函数，那么默认会走get方法，函数的返回值就是属性的值；，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例。上述代码中，当改变 obj 里属性的值时，打印 newVal 和 oldVal 的结果，发现他们是相等的。不过，deep 无法监听到数组的变动和对象的新增，参考 vue 数组变异，只有以响应式的方式触发才会被监听到——时，setter 会被调用，
Vue 中的 watch 和 computed 的区别
小草莓的博客
07-06 556
watch用于监听特定数据的变化，并在数据变化时执行相应的操作；可以监听某个数据的变化，也可以监听多个数据的变化；适合处理异步操作或复杂的数据变化逻辑；通过watch监听的数据发生变化时，可以执行一些异步操作、复杂逻辑计算或手动操作DOM 等；computedcomputed用于基于响应式依赖进行动态计算，并返回计算结果。依赖于响应式数据，只有当依赖的数据发生改变时，computed才会重新计算。适合进行简单的数据计算、筛选、排序等操作。由于computed。
Vue中watch和computed
qq_39321234的博客
03-10 585
然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。2.所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。1.所被Vue管理的函数，最好携程普通函数，这样this的指向才是vm或组件实例对象。首先这里进行声明，这个讲的是vue2的内容，在vue3发生了什么变动与此无关。上面代码是命令式且重复的。
Vue中watch与computed区别
m0_71088505的博客
07-01 394
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。1.computed能完成的功能，watch都可以完成。：更改姓之后延迟一秒显示改后的全名。
Vue中watch与computed的区别和联系
weixin_44043093的博客
09-21 239
1.实现一个同样的功能，看看watch与computed之间的不同： 需求：根据两个产品的数量，计算总数； demo: html部分 <body> <div id="app"> a产品数量:<input type="number" v-model.number="a" /> <br /> + <br /> b产品数量:<input type="number" v-mode
Vue中computed和watch的区别
热门推荐
a_dragon_的博客
04-09 2万+
今天简单说一下computed和watch的区别。 先看代码，两者怎么实现的。 <div id="app"> <input type="text" v-model="firstName"><br> <input type="text" v-model="lastName"><br> <h2>{{fullName()}}</h2> </div> <scr
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
详解Vue中的watch和computed
01-22
对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过源码来分析这三者的背后实现原理，...
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
Vue中watch、computed、updated三者的区别及用法
10-15
主要介绍了Vue中watch、computed、updated三者的区别及用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 414
ASP.NET Core Web API 使用Autofac框架
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 380
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
略记一次抓取内容后解密及登录的经历
最新发布
深蓝浅蓝的天
08-09 951
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 658
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 280
vue实现放大缩小，拖动盒子完整代码付效果图
vue中watch和computed区别
03-16
watch 和 computed 在 Vue 中都用于响应数据变化。但是它们有以下不同: 1. watch 通过手动监听特定数据的变化来触发回调函数，而 computed 则是基于它所依赖的数据自动计算。 2. computed 是基于缓存的，只有在它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值