21.Vue的监视属性watch与计算属性computed对比

已于 2022-06-09 17:35:57 修改
阅读量575 收藏
点赞数
分类专栏： Vue全家桶从入门到精通 文章标签： vue.js 前端 javascript
于 2022-06-09 17:35:35 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.youkuaiyun.com/qq_37050372/article/details/125203438
版权
本文通过姓名案例对比Vue的计算属性和监视属性的实现方式，指出计算属性的简洁性和监视属性的异步任务能力。计算属性在某些情况下无法实现延迟更新，而watch可以通过异步任务实现。同时，文章提到了箭头函数在定时器中的使用注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1.计算属性实现姓名案例的写法

2.监视属性实现姓名案例的写法

4.计算属性能否实现延迟一秒？

5.箭头函数的使用

6.结论：

17.Vue的计算属性_爱米酱的博客-优快云博客我们这一节将通过一个小案例来讲清楚Vue的计算属性。案例的实现效果是，有两个输入框，一个输入姓，一个输入名，最后呈现姓-名当姓或者名改变的时候，最后呈现的姓-名也同步发生改变https://blog.youkuaiyun.com/qq_37050372/article/details/12460699718.

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【vue2第六章】watch侦听器(防抖：延迟执行)
weixin_72979483的博客
08-29 1689
什么是watch侦听器？ 在Vue.js中，watch是一种用于侦听数据变化的机制。它允许你在数据发生改变时执行相应的操作。可以简单地理解为，watch是一种侦听器，它可以监听指定的数据变化，并在该数据发生变化时执行特定的函数。 在Vue实例中，你可以使用watch选项来定义一个或多个侦听器。每个侦听器都是一个对象，其中key表示要侦听的数据，value为一个函数，该函数在数据发生变化时被调用。
Vue3的监听属性watch和计算属性computed
qq_43151592的博客
04-18 2072
Vue3的监听属性watch和计算属性computed
Vue中computed与watch区别7点不同
qq_39762109的博客
09-28 644
3、computed中每个属性都可以设置set与get方法，属性的属性值是函数，函数返回值为属性的属性值；watch监听的数据必须是data中声明过或父组件传递的props数据，数据变化触发监听器；6、是否支持异步：computed不支持异步，当computed内有异步操作的时是无法监听数据变化的；4、是否调用return：computed中的函数必须使用return返回，watch中的函数不是必须用return；1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调；
Vue：（十）watch对比computed
weixin_41377877的博客
12-05 282
Vue之计算属性_监视属性_比较
不是全网最详细computed对比watch属性
yms869的博客
02-11 300
不是全网最详细computed对比watch属性
业务实现：vue2延迟监听
zhazhali_fenqi的博客
03-21 865
在实现一个业务功能的时候，当时有一个问题，就是我的保存原始数据的变量后面跟绑定的变量一直是一样的，也就是说他会随着原始数据的变化而变化。问题是，在初始渲染的时候会有三次监听到改变，也就是我们并没有操作表单，在初始渲染的时候就会有三次表单值的改变被监听到，那么按钮就会从禁用转变为可以使用，但是这种时候我们并没有操作表单。在这个过程中，我也尝试了监听的方法，如果使用监听我们不用序列化，也不用遍历比较每一个表单内容，只需要监听对象值是否改变，然后把更新按钮禁用或者使用就行。由此已经实现表单内容更新时候的比较。
Vue(二) 计算属性computed、监视属性watch、绑定class和style、条件渲染v-show,v-if；列表v-for，key的原理、收集表单数据、过滤器|
lxh的博客
08-29 1851
计算属性computed、监视属性watch；绑定class与style样式；v-if；v-for；v-for里key的原理，虚拟DOM对比；列表过滤filter，列表排序sort，Vue检测数据、对象的原理；手机表单数据；管道过滤器
vue计算属性(computed)和侦听器(watch)
y516369的博客
06-09 1257
Vue计算属性(computed)和侦听器(watch)
Vue3(二)计算属性Computed，监视属性watch，watchEffect,标签的ref属性，propos属性，生命周期，自定义hook
最新发布
lxh的博客
09-23 1370
计算属性computed:简写+完整写法；监视属性watch的五种情况，最后总结了什么情况下是默认开启深度监听，什么情况需要手动开始深度监听；watchEffect没什么重点；标签的ref属性：用在普通标签上是打标识(很神奇)，用在组件标签上可以实现组件传值。propos实现父给子传值，重要！；生命周期没啥好说的；自定义hook真正体现了组合式API的风格
Vue中计算属性computed与methods的区别
小婷的博客
05-16 162
计算属性computed与methods的区别 1.computed：当计算属性依赖的变量发生变更时，才会重新执行计算 2.methods：只要页面重新渲染，就会重新执行计算 watcher：侦听器，会侦听某一个属性的变化，变化时会做一些异步操作，同步操作的话，不如computed简洁。 注： computed与method都能实现的一个功能，建议使用computed，因为有缓存 computed与watcher都能实现的一个功能，建议使用computed，因为更简洁 ...
vue之延时加载
i++;
05-05 3997
最近使用vue时用到了延时加载，最先想到的是使用js的setTimeout（）函数, 例如： setTimeout("alert('5 asdasda!')",2000) 但是用setTimeout函数时调用vue中menths中定义的函数失效，所以查找vue中定义的延时加载方式就ok了。 clearTimeout(this.timer); //清除延迟执行 this.timer = s...
[vue] watch对比computed
qq_14993591的博客
11-03 236
文章目录computed计算属性实现姓名案例watch监视实现姓名案例对比姓名案例新需求时使用watch法computed和Iwatch之间的区别: computed计算属性实现姓名案例 <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/&g
vue的computed计算属性
matthewchen123的博客
02-24 184
在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。 computed和methods computed和methods二者可以进行完全替换 <p>reversed message:{hellomylove()}<p> <p>reversed message:{hellomylove}<p> <script> computed:{ hellomylove(){ return this.message.
理解vue2中的computed计算属性与缓存机制
weixin_47359038的博客
04-08 797
【代码】理解vue2中的computed计算属性与缓存机制。
vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析
wrc的专栏
11-30 1万+
vue computed源码分析
Vue生命周期与watch的运行前后快慢
IU
01-31 632
最近碰到一个需求，刷新与watch监听实现的逻辑冲突。即刷新的时候不运行watch。想过使用provide/inject来实现，但是后面由于种种原因只能另辟他径。想着在刷新阶段新加一个标识，使得watch中的相关逻辑不运行，这就导致了需要在刷新的时候watch运行后需要有一个来打开标识。所以就进行了如下代码的研究。所以在onUpdated中将 F5 置为false 代表非刷新阶段，后面的逻辑便可以不受影响。
java 验证码 延迟_vue watch监听验证码时，axios延迟发送post请求。
weixin_42349978的博客
02-25 281
标题写的全面一些，方便其他人检索，我就是找了半天找不到资料，最后自己搞定了。原理：每次监听到输入值变化，就打一个时间戳，然后暂停2秒再去提交post验证。但是每次提交前，判断一下之前打的时间戳和现在时间是否大于2秒，如果大于，则真去提交post，否则return掉不执行。以下是代码片段：data () {return {captchaInputLastTime:null,}watch: {// 监...
前端之vue计算属性与监视属性
weixin_46372074的博客
04-25 825
vue计算属性与监听属性计算属性 computed监听属性 watch（又名侦听属性）@事件="方法"监听属性 (watch)的两种写法深度监听(用`deep:true`监听多级结构变化)简写监听属性计算属性与监听属性的区别 计算属性 computed data内的是属性 计算属性是用data内的属性经过计算得到的新属性。 计算属性：初次读取和依赖数据改变读取。 计算属性：obj 是对象格式，get（）返回值就是computed内的obj对象的值；set（）通过传入的值修改依赖项来修改obj的值。 完整写
vue中computed的详细讲解
热门推荐
alical的博客
02-12 19万+
vue中computed的详细讲解 定义 用法 依赖性 优缺点 1.定义 computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新 [TOC]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未来@音律

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值