computed和watch区别

于 2023-03-10 15:02:30 发布
阅读量139 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52563729/article/details/129442708
版权

computed和watch之间的区别:

1.computed能完成的功能,watch都可以完成。

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

在这里插入图片描述
监控属性可以这样实现

在这里插入图片描述
这里使用计算属性来完成这个功能就会出现错误，为什么？？计算属性的值是里面函数的返回值，但是这个返回值返回给了settimeout
在这里插入图片描述
settimeout是window的，这里fullname的返回值没有！！！！所以计算属性中无法开启异步任务来维护数据！！！

两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对

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

在这里插入图片描述
这里一定要写成箭头函数！！！！，因为这个settimeout是window管理的，如果我们写成普通函数了，那么这个this就是window，如果是箭头函数，那么我么就会去找外面一层的this，外面一层的this指向的是Vue实例，所以我们才能使用vue.firstName！！！！！

pqxpq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
computed和watch之间的区别
wanglin007
03-31 1748
vue学习笔记
Vue学习笔记：watch对比computed
薛定谔的猫
10-14 579
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。1.computed能完成的功能，watch都可以完成。watch加一个定时器就可以，但是computed不行，计算属性是不能开启异步任务的。
计时器和计算属性computed
qq_42453238的博客
04-16 1670
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。 语法格式可以是以下两种： setTimeout(要执行的代码, 等待的毫秒数) setTimeout(JavaScript 函数, 等待的毫秒数) setTimeout(functiom(){ },xx-ms) ...
vue3 computed 里面set get方法使用
wandoumm的博客
07-09 1406
{{count}} {{newCount}} add import {reactive,ref,watch,onBeforeMount,computed} from 'vue' const count = ref(0)
前端之vue计算属性与监视属性
weixin_46372074的博客
04-25 633
vue计算属性与监听属性计算属性 computed监听属性 watch（又名侦听属性）@事件="方法"监听属性 (watch)的两种写法深度监听(用`deep:true`监听多级结构变化)简写监听属性计算属性与监听属性的区别 计算属性 computed data内的是属性 计算属性是用data内的属性经过计算得到的新属性。 计算属性：初次读取和依赖数据改变读取。 计算属性：obj 是对象格式，get（）返回值就是computed内的obj对象的值；set（）通过传入的值修改依赖项来修改obj的值。 完整写
computed和watch使用
最新发布
08-19
成绩单案例、购物车案例、翻译案例
深入浅析Vue中的 computed 和 watch
08-27
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
Vue中computed及watch区别实例解析
10-15
主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中watch和computed的区别与使用方法
10-14
主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
详解vue中computed 和 watch的异同
08-30
本篇文章主要介绍了vue中computed 和 watch的异同，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue Computed 依赖收集与更新原理
兰亭古墨
08-19 1903
调用 watcher.depend() , this 指的是 computed watcher，会将 computed watcher 里面的 deps 保存在所有依赖调用 deps[i].depend()，进而调用 Dep 类中的 Dep.target.addDep(this)，使得 render watcher 中保存了当前的 dep，假设改变了 a，请问底层是如何收集依赖，如何触发更新的？所以，修改 a 属性的值，最后 notify 会清空这个 保存 watcher 的队列，进行页面更新！
vue中计算属性(computed)和监听属性(watch)的异步操作
qq_64209130的博客
05-06 1万+
计算属性能(computed)完成的功能监听属性都能完成 比如计算两个数的和 <body> <div id="app"> <p>总和{{adden}}</p> 输入的值1<input type="text" v-model:value="a" > 输入的值2<input type="text" v-model:value="b"> </div>
计算属性computed和侦听属性watch的区别
前端精髓
05-01 6576
ue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch
彻底理解Vue中的计算属性(computed)、方法(methods)和侦听器(watch)
qq_45622114的博客
10-13 1053
彻底理解Vue中的计算属性(computed)、方法(methods)和侦听器(watch) 前言：在学习Vue这个框架的时候，我们都会接触到里面的计算属性，方法，侦听器，但是对于初学者来说，很容易把这些概念混淆，所以准备写一篇文章来彻底讲清楚这三个属性。 计算属性（computed） 对于初学者来说，可能还不清楚计算属性、方法、侦听器这些属性该写在哪里，我这里就简单写一个vue2的模板，当然代码不是千篇一律的，每个人的代码格式都可能不同，但是大概的规范是要遵循的，我这里只是列举的一个比较常见的写法
【VUE】vue项目开发中，setTimeout等定时器的管理。
hustxiaoxian的专栏
08-27 6万+
一、问题来源。 在项目中，我们经常有这样的需求，一个页面初始化后，需要不断的去请求后端，来获取当前某个记录的最新状态。 显然，这个可以用setTimeout以及回调中继续setTimeout来实现。 我们假设定时器是在页面#/test/aaa上创建的。 但是，会遇到以下两个问题，我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb，定时器
Composition API -- computed计算属性
Sun_blog
07-12 1020
先实现一个计数器 const app = Vue.createApp({ setup(){ const { ref, computed} = Vue; let count = ref(0); const handleClick = () => { count.value++; } return
vue.js中settimeout遇到的问题（时间参数短效果不稳定）以及解决办法
love07070707的博客
04-12 1万+
先看效果图，这是弹窗效果，要求就是弹窗出现和消失时候不是很突兀，要有过渡效果。 首先看弹窗出现的实现思路，先加一个beforeActive类，再加一个active类。我们看审查元素，一开始display：none； 在beforeActive中display：block；只是background: transparent;然后在一定时间后再加上active类。问题就来了，在打开弹窗代码...
setTimeout在vue中的正确使用
热门推荐
大唐锦绣的博客
10-25 13万+
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失 这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 setTimeout的定义和用法。问题出...
Vue computed计算属性的妙用
一个无聊的程序员的琐碎
07-14 3万+
computedcomputed：相当于method，返回function内return的值赋值在html的DOM上。但是多个{{}}使用了computed，computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变，function才会从新执行，并修改DOM上的内容。computed和method的对比<div id="example">
computed 和 watch 区别
05-13
在Vue.js中，computed和watch都是用于监听数据变化的。但是它们的使用场景和作用有所不同。 computed是计算属性，它会根据依赖的数据自动计算出新的值，当依赖的数据变化时，它会重新计算。computed的特点是具有缓存，只有当依赖的数据发生变化时，才会重新计算，否则会直接返回之前缓存的结果。因此，computed适用于那些根据其他数据计算出结果的场景，比如过滤、格式化等等。 watch是监听器，它会监听指定的数据变化，当数据变化时，执行指定的函数。watch的特点是能够处理异步操作，因为它在数据变化后立即执行函数，而不是等待下一次渲染。因此，watch适用于那些需要在数据变化时执行异步操作的场景，比如请求数据、操作DOM等等。 总的来说，computed适用于计算属性，返回一个新的值；watch适用于监听数据变化后执行一些操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值