Vue 监听watch和计算属性compute的区别

已于 2024-04-20 10:14:16 修改
阅读量626 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端
于 2022-02-08 15:39:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcc187/article/details/122825124
版权

1、computed能完成的功能，watch都能完成

2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的原则：

1、所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm或者组件实例对象

2、所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或者组件实例对象

lcc187
关注
专栏目录
21.Vue的监视属性watch与计算属性computed对比
爱米酱的博客
06-09 481
Vue的监视属性watch与计算属性computed对比
五、【Vue3】——计算属性与监视（computed&watch&watchEffect）
yifei1234567的博客
04-02 2122
Vue3中的计算属性computed和监视watch与Vue2中的配置功能一致，但监视watch在用的时候却存在两个小坑，而且Vue3出现了watchEffect函数，能够更智能化去监视一个对象，下面与小编一起学习探讨一下吧。
vue计算属性 和监听 区别
鬼鬼的博客
09-17 813
监听属性(compued): 1.一次只能计算一个 变量 如果data有多个变量 则需要重新写一变 2.只是监听数据源data里面的属性,不产生新的属性 所以不用写return 计算属性($Watch): 1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个 2. 因为新增属性 所以要写 return 监听: //监听的一种方式 vue 对象创建完成后直接写到实例属性上 //参数1:监听的对象 数据源 data里面的变量 // 参数2:回调函数
Vue 计算属性 和监听属性
C的博客
09-03 134
计算属性 <div id="app"> //一般情况的写发的写法 <h1>{{num1+num2}}</h1> // 计算属性 <h1>{{sum}} </h1> <p>{{msg2}}</p> //msg2 默认是 ABCD 但是通过计算属性的值 他变的排序倒过来了 // 但是 getMsg 的set 设置了 当 getMsg 发生变化时 他会得到 val 值然后 val的值就会 是被 get 设置成翻转
vue中的计算属性和监听的区别
Canace_Xyxjjcaw的博客
01-13 626
vue中的计算属性是不能通过异步任务去维护数据的。
vue 计算属性和监听器区别
Key_Val的博客
06-15 4671
vue计算属性和监听器的区别
删除页面最后一条数据时，currentPage没有减一，页面列表为空
waillyer的博客
09-08 389
思路：监听页面的总条数，并对总条数进行判断。 当页面总条数 = （当前页数-1）*当前页条数，currentPage减1，重新获取列表 watch:{ total(){ if(this.total==(this.currentPage-1)*this.pageSize&& this.total!=0){ this.currentPage-=1; getDiscountList(this);//获取列表数据 }
谈谈VUE种methods watch和compute的区别和联系
08-29
Vue 中 methods、watch 和 computed 的区别和联系 在 Vue 中，methods、watch 和 computed 是三个常用的机制，但它们的作用机制和性质却不同。下面我们将详细介绍它们的区别和联系。 Methods 在 Vue 中，methods ...
【Vue3】computed计算属性和watch监视
qiaoyangla的博客
06-29 151
watch函数 与Vue2.x中watch配置功能一致 两个小坑： 监视reactive定义的响应式数据时，oldValue无法正确获取、强制开启了深度监视（deep配置无效） 监视reactive定义的响应式数据中某个属性时：deep配置有效。...
vue3的computed属性和watch属性
weixin_56733569的博客
12-09 1294
关于vue3中computed和watch的用法
详解vue 计算属性与方法跟侦听器区别(面试考点)
12-29
计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id=example> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。 所以，对于任何复杂逻辑，你都应当使用计算属性。 基础例子 <div id=app> {{fullName}} </div> var vm = n
vue中监听器和计算属性
qq_42707594的博客
08-13 1512
一、区别： 1、计算属性(computed)：一般是用来得到想要获得的数据格式。写在计算属性中的数据就不能写在data中了！！！ 2、监听器(watch):是用来监听数据的变化，可以监听data中的数据。 3、 二、computed的使用。 1、在computed对象中定义即可。计算属性即是计算他所依赖的值 如下图：它计算的是fullName依赖的值，不能计算在data中已经定义过的变量。即在计算属性中写了的变量就不能在data中在写一次 2、与methods中方法相比 1、计算属性会进行
Vue计算属性和监听属性的区别
KAMHUNCHAN的博客
02-09 992
监听属性也可以实现计算属性的功能：差异：
vue计算属性与监听器的区别
苦涩精灵的博客
10-20 801
vue计算属性与监听器的区别 计算属性（computed） 监听器（watch） 监听data中没有的值 监听data中有的值 使用时触发 使用不会触发 值有变化就触发 值有变化就触发 没有settter，要手动实现 可以获取 新的 和 旧的值 会缓存计算结果， 重新使用不会触发该方法 计算属性 eg: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l
vue的计算属性和侦听属性
candy755的博客
09-09 833
利用计算属性computed做了个简单的两个数相加的效果，代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;script type=&quot
vue中的计算属性和侦听属性的区别
最新发布
xiaowude_boke的博客
02-21 794
vue的计算属性和侦听属性的区别
Vue：计算属性和方法的区别和watch监听器的使用
Boxbiu的博客
11-20 328
html <div id="app"> <div>{{firstName + " " + lastName}}</div> </div> js <script> var app = new Vue({ el:'#app', data:{ firstName:"Min", lastName:"Box" } }...
vue中计算属性与侦听器的区别
m0_50665842的博客
12-05 347
vue中的计算属性与侦听器的区别
vue计算属性与侦听器的区别
Fairy_tutu的博客
12-20 1293
a. 当第一次使用计算属性的时候, vue会调用一次函数。c. 只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存。(1) 功能不同 : 计算属性是解决模板语法冗余,而侦听器是监听data中某一个数据的变化。b. 之后使用计算属性, vue不会调用这个函数，而是从缓存中直接读取。b. 计算属性函数一定要有返回值。(4) 计算属性可以新增一个属性，而侦听器一定要是data中的属性。(3) 计算属性不支持异步操作，侦听器支持异步操作。(2) 计算属性有缓存，侦听器没有缓存。
vue监听器和计算属性
10-28
Vue中的监听器和计算属性都是用来监控数据变化的。其中，监听器可以监听某个数据的变化，并在数据变化时执行相应的操作，而计算属性则是根据已有的数据计算出一个新的值，并将这个新值返回给模板进行渲染。 具体来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值