计算属性computed和watch监听的区别

已于 2024-01-29 13:53:36 修改
阅读量246 收藏
点赞数
文章标签： vue
于 2023-02-16 15:23:09 首次发布
原文链接：http://www.gaosan.com/gaokao/427040.html
版权

watch 会初始化监听，不会被缓存，watch需要在数据变化时执行异步或开销较大的操作时使用。

computed需要调用才执行，不可以初始化，属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。

computed多条数据影响一条数据。

watch一条数据影响多条数据。

  1. computed有缓存，watch没有缓存

  2. computed不支持异步，watch支持异步

  3. computed需要返回值，watch不需要返回值

  4. computed的值不能在data中定义，watch需要在data中定义

CcFr_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue计算属性 和监听 区别
鬼鬼的博客
09-17 793
监听属性(compued): 1.一次只能计算一个 变量 如果data有多个变量 则需要重新写一变 2.只是监听数据源data里面的属性,不产生新的属性 所以不用写return 计算属性($Watch): 1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个 2. 因为新增属性 所以要写 return 监听: //监听的一种方式 vue 对象创建完成后直接写到实例属性上 //参数1:监听的对象 数据源 data里面的变量 // 参数2:回调函数
computed计算属性和watch区别以及各自的使用
热门推荐
qq_38110274的博客
11-10 2万+
一、总述 computed和watch都是vue框架中的用于监听数据变化的属性。 二、computed计算属性 1、使用方法和data中的数据一样，但是类似一个执行方法 2、在调用时候不加（） 3、必须有return返回 4、如果函数所依赖的属性没有发生变化，从缓存中读取 5、应用场景—求和，示例 <el-form> <el-row> <el-col :span="24" style="display:flex;justify-content:flex-end;
计算属性computed和watch监视的使用和区别
weixin_41549971的博客
06-26 3276
计算属性computed，watch监视，事件修饰符，键盘事件，过滤器
Vue_侦听器 watch 监听 computed 计算属性
Mr.小灰狼_随笔
08-26 2821
Vue_侦听器 watch 监听 computed 计算属性 目录 侦听器 watch handler immediate $watch() deep 项目简单使用 ：
computed计算属性和 watch监听属性以及他们的区别
最新发布
XCXLOVE_的博客
03-31 600
好好学习天天向上，vue初学者
Computed 和 Watch 的区别
m0_62118859的博客
04-27 1万+
1.computed计算属性： 作用： （1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。 （2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。 （3）不支持异步，如果有异步操作，无法监听数据的变化。 （4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。 （5）computed的值会默认走缓存，计
vue--计算属性（computed）vs事件（methods）vs监听器（watch）
muzidigbig的博客
10-18 3361
关于 computed 和 watch 的差异： 1.computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props） 2.computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访...
【vue2】计算属性(computed)与侦听器(watch)详解
嗨，朋友你好！我是前端领域的工作者
01-08 1万+
【vue2】计算属性(computed)与侦听器(watch)详解。 计算属性两种写法：①默认get()类型②get()与set()类型搭配使用 侦听属性的两种写法：①值类型②引用类型 计算属性与侦听属性的总结对比
Vue.js计算属性computed与watch（5）
10-20
Vue.js 提供了两种强大的数据处理机制：计算属性（computed）和观察者（watch）。计算属性主要用于在模板中处理复杂逻辑，而观察者则用于监听和响应数据的变化。在这篇文章中，我们将深入探讨这两个概念，并通过实例...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
computed计算属性与watch监听.md
01-03
computed计算属性与watch监听.md
vue中watch和computed的区别与使用方法
10-14
**watch 和 computed 的区别** 1. 计算属性是自动计算的，并且只有在依赖变化时才更新，而 watch 会在每次数据变化时执行回调。 2. 计算属性支持缓存，而 watch 不支持。 3. watch 更适合处理数据变化后的异步操作，...
Vue 中 watch(监听属性) 和 computed(计算属性) 的对比
VnOcean的博客
06-04 1049
vue 中的监听属性 watch 和计算属性 computed 都有监听的作用，但具体的适用场景和方法是由区别的。
computed计算属性与watch侦听器
l15655495902的博客
05-18 344
事件.stop 阻止事件冒泡（由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件）@事件.prevent 阻止事件默认（例如：当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法）@事件.capture 触发事件捕获（添加事件侦听器时使用事件捕获模式）@事件.self 当事件在该元素本身触发回调@once 只执行一次（绑定了事件以后只能触发一次，第二次就不会触发）
vue 的计算属性（computed）和侦听器（watch）
青蛙king的博客
10-27 2970
目录 一、计算属性（computed） 1、计算属性的特点 2、计算属性的原理 3、computed与methods的区别 二、侦听器（wacth） 1、侦听器的特点 2、使用 wacth 的注意事项 3、wacth 的两个属性 4、watch 与 $watch 的关系 5、watch 的使用案例 三、计算属性 和 侦听器 适用场景 四、推荐几篇关于 computed 和 watch 的原理的深度解析好文 一、计算属性（computed） 1、计算属性的特点 支持数据缓....
watch监听属性和计算属性的区别及用法
m0_46641774的博客
03-28 1158
watch监听属性和计算属性的区别及用法
Vue中watch的用法
weixin_54930261的博客
02-09 1472
Vue中watch的用法
watch(监视属性)和computed(计算属性)的区别
qq_67983277的博客
11-07 907
watch(监视属性)和computed(计算属性)的区别
Vue计算属性
hobbys的博客
11-21 598
1.什么是计算属性 计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。 2.定义计算属性 const vm = new Vue({ computed: { ... } }) 3.计算属性的实例 <div class="box" :style="{ backgroundColor: rgb }"> {{ rgb }} </div> <button @click="s
vue项目中的计算属性computed和监听属性watch怎么使用
04-23
计算属性computed可以根据已有的数据，动态地计算出新的数据，并将计算结果返回。在Vue的组件实例中，可以通过在computed选项中定义计算属性。比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值