computed 和 watch的区别

最新推荐文章于 2024-01-26 22:43:59 发布
最新推荐文章于 2024-01-26 22:43:59 发布
阅读量142 收藏
点赞数 1
分类专栏： 前端面试题(Vue) 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39639537/article/details/109814703
版权

概念上
computed 是计算属性,它会根据所依赖的数据动态显示新的计算结果,通过计算出来的属性不需要调用,可以直接在DOM中使用
watch 是监视对象,对象的键是data对应的数据,值是对应的回调函数或者对象,当data的数据发生变化,会执行对应的回调函数,函数有两个参数,val(更新后的data数据),oldval(原来的data数据),deep属性可以实现深度监听

缓存上**
computed 具有缓存属性 只有依赖的数据发生变化,才会重新计算,否则直接调用缓存,
watch 每次监听的值发生变化,都会执行回调

使用场景上
computed 当一个属性受多个属性影响的时候,使用computed 比如: 购物车商品结算
watch 当一条数据影响多条数据的时候,使用watch 比如: 贷款金额的判断

ternence_li
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
computed和watch使用
08-19
在Vue.js框架中，`computed`和`watch`是两个非常重要的概念，它们主要用于处理数据的响应式更新和监听。这两个特性使得Vue能够高效地管理组件的状态并及时更新视图。 `computed`属性用于计算基于其他数据的值，并且...
computed和watch区别
m0_59070120的博客
02-27 531
4，computed页面刚刚挂载的时候就监听，watch不会，可以设置immediately为true来实现。5，computed支持缓存，只有依赖的属性发生变化的时候才会重新调用；1，computed是计算属性，watch是监听属性，监听data里面数据的变化。3，computed必须要return，watch不用。6，每个计算属性可以有多个依赖，watch只有一个。2，watch支持异步，computed不支持。
Vue系列之 computed 和 watch 区别
老__L的博客
03-16 471
computed 和 watch 区别
computed和watch区别以及运用场景
qq_57404393的博客
09-05 1564
computed:多个数据进行相应操作影响一个，进行数值计算时利用其缓存的特性，避免每次获取值都重新计算。watch:一个数据执行相应操作会影响多个数据，当需要在数据变化时候执行异步操作或者开销较大的操作时使用。底层借助了Object.defineproperty方法提供的getter,setter方法。
computed和watch区别和应用场景
m0_64562972的博客
11-13 539
computed和watch区别
Computed 和 Watch 的区别
m0_62118859的博客
04-27 1万+
1.computed计算属性： 作用： （1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。 （2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。 （3）不支持异步，如果有异步操作，无法监听数据的变化。 （4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。 （5）computed的值会默认走缓存，计
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的computed和watch的区别
weixin_44063225的博客
07-06 1万+
computed和watch都是vue框架中用于监听数据变化的属性
Vue2-computed和watch区别（通俗易懂）
最新发布
qq_63943166的博客
01-26 1265
watch和computed的区别
Vue的computed和watch的区别
weixin_46392266的博客
03-01 2717
1.computed 1.1 定义 计算属性,类似于过滤器,对绑定到view的数据进行处理。 1.2 get用法 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } 计算属性不可在data里面定义。变量不可被重复定义和赋值 不支持异步 1.3 get和set用法 data:
深入浅析Vue中的 computed 和 watch
08-27
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
详解vue中computed 和 watch的异同
08-30
在 Vue 中，computed 和 watch 是两个非常重要的概念，它们都可以用来观察页面的数据变化，但是它们之间有着很大的区别。 首先，computed 是一个计算属性，它可以根据依赖项自动更新。例如，在上面的例子中，我们...
vue中watch和computed的区别与使用方法
10-14
**watch 和 computed 的区别** 1. 计算属性是自动计算的，并且只有在依赖变化时才更新，而 watch 会在每次数据变化时执行回调。 2. 计算属性支持缓存，而 watch 不支持。 3. watch 更适合处理数据变化后的异步操作，...
$nextTick 的原理和使用的场景
qq_39639537的博客
12-03 1万+
1.使用原理 1) vue是异步执行dom更新的，一旦观察到数据变化，vue就会开启一个队列，然后把在同一事件循环当中观察到数据变化的watcher推送进这个队列，如果这个watcher被触发多次，只会被推送到队列一次，这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作，这样可以提高渲染效率。 2) 如果要获取更新后的dom元素，可以使用vue内置的$nextTick方法，参数是一个函数。它的作用类似setTimeout，进行执行异步的操作。 2.应用 vue中的nextTick主要用于处理数
promise的方法有哪些，能说明其作用
qq_39639537的博客
11-19 3931
1、Promise.prototype.then() 1）作用是为 Promise 实例添加状态改变时的回调函数。接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。 2）返回的是另一个Promise对象，后面还可以接着调用then方法。 2、Promise.prototype.catch() 1）用于指定发生错误时的回调函数。 2）返回的也是一个 Promi
vue 中怎么给 data 动态添加数据，为什么要这样写
qq_39639537的博客
11-25 3214
1.官方文档定义：如果在vue实例创建之后添加新的属性到实例上，她不会触发视图更新。 2.原因：受现代JavaScript的限制，vue不能检测到对象属性的添加或删除。由于vue会在初始化实例是对属性执行getter/setter转换过程（使用Object.defineProperty进行数据的劫持）。所以属性必须在data对象上存在才能让vue转换它，这样才能让它是响应的。 方法：1.this.$set(对象名，属性，值)或 Vue.set(对象名，属性，值) 2.Object.ass
router 和 route 的区别
qq_39639537的博客
11-25 660
router是VueRouter的实例，是一个全局的路由对象，它包含了所有的路由和许多关键的对象和属性。 route是当前正在跳转的路由对象，是一个局部路由对象。里面包含当前路由的信息，比如：name,path,params,query等 ...
computed 和 watch 区别
05-13
在Vue.js中，computed和watch都是用于监听数据变化的。但是它们的使用场景和作用有所不同。 computed是计算属性，它会根据依赖的数据自动计算出新的值，当依赖的数据变化时，它会重新计算。computed的特点是具有...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值