vue中的computed和watch的区别是什么

最新推荐文章于 2024-04-10 21:10:15 发布
最新推荐文章于 2024-04-10 21:10:15 发布
阅读量393 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56726579/article/details/125270588
版权

computed是为了简化模板字符串的,防止模板太过冗余，它具有缓存特性，它用来监听自己定义的变量，该变量不在data中生命，直接在页面中进行数据的双向绑定，展示出其结果或作其他处理

监听的是依赖值，依赖值不变的情况下会直接读取缓存进行服用，变化的情况下才会直接调用。

watch用来监听vue实例，它监听的变量必须在data中声明，监听的是属性值，只要属性值发生变化，其他都会执行回调函数来执行这一系列操作，它可以监听一个变量也可以是一个对象，一般用户监听路由，它比较适合的是一个数据影响多个数据，它不具有缓存性

是个乌龟啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 中的 watch 和 computed 的区别是什么？
一颗松鼠
05-18 1128
在 Vue.js 中，watch和computed。
vue中的watch与computed的区别
最新发布
libingjiedd的博客
04-10 410
当 computed 属性的属性值是函数，那么默认会走get方法，函数的返回值就是属性的值；，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例。上述代码中，当改变 obj 里属性的值时，打印 newVal 和 oldVal 的结果，发现他们是相等的。不过，deep 无法监听到数组的变动和对象的新增，参考 vue 数组变异，只有以响应式的方式触发才会被监听到——时，setter 会被调用，
Vue的computed和watch的细节全面分析
weixin_33810006的博客
01-23 657
1.computed 1.1 定义 是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return...
vue中watch和computer区别
qg2276879379的博客
10-26 3793
前言：watch和computed都是以函数为基础的，但各自却都不同 一、作用机制上 watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 二、从性质上 1.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。 2.watch:类似于监听机制+事件机制。 例如： watch: { firstNam
Vue 中 computed 和 watch 的区别?
weixin_55932347的博客
03-15 137
当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。computed 是计算属性, 可以根据 data 中的数据成员,动态计算出一个新的数据成员(这个数据成员在 data 中并不存在), 计算属性的函数必须有返回值;watch 是监视器, 可以监视 data 中某一个数据成员的改变或路由中的某些属性的改变, 可以根据这个改变, 做一些其他操作(不仅仅局限于更新其他相关数据).watch是监听数据变换，没有缓存。
详解vue中computed 和 watch的异同
08-30
本篇文章主要介绍了vue中computed 和 watch的异同，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中computed及watch区别实例解析
10-15
主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中watch和computed的区别与使用方法
10-14
主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
深入浅析Vue中的 computed 和 watch
08-27
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
Vue 计算属性computed 和 watch
weixin_54976447的博客
06-03 216
(1) computed 复杂写法: get() 和 set()(2) computed 计算数据简写。
vue中computed 和watch 的区别是什么？
qq_38806666的博客
02-15 327
vue中computed 和watch 的区别是什么？
vue中computed和watch的区别，以及适用场景
az44yao的专栏
06-18 384
computed：通过属性计算而得来的属性 　　1、computed内部的函数在调用时不加()。 　　2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。 　　3、computed中的函数必须用return返回。 　　4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成
Vue中watch和computed的区别
qq_44011569的博客
04-12 198
1. 计算属性（`computed`）：计算属性会根据它所依赖的数据动态计算出一个新的属性值，并缓存这个属性值，当计算属性所依赖的数据发生变化时，计算属性会重新计算。计算属性通常用于将多个属性的计算逻辑抽象出来，以提高代码的可读性和可维护性。 2. 观察属性（`watch`）：观察属性会观察一个数据的变化，并在数据发生变化时执行一个回调函数。观察属性通常用于监控一个数据的变化，并在变化时执行一些副作用的操作，例如调用接口、更新数据等。
vue -监视属性与计算属性
qq_52135740的博客
07-26 420
监视属性 监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue
Vue中的computed 和 watch
baidulixueqin的博客
04-05 3256
computed 和 watch Vue2 options文档 响应式原理options.data 1.data会被Vue监听 2.会被Vue实例代理,vm就是data的代理 3.每次对data的读写都会被Vue监控。不管你是读写它的本身还是读写代理都会被监控，data对象会被篡改,本来的n会变成get n和set n。 4.Vue会在data变化时更新UI data变化时除了更新UI，还能做些啥？ 一.Computed 计算属性 1.用途:被计算出来的属性就是计算属性 2.缓存： 如果依赖的属性没有
vue中computed和watch区别
03-12
`computed` 和 `watch` 是 Vue.js 中两个不同的响应式系统，它们的作用都是监听数据的变化并作出相应的更新。 `computed` 是计算属性，它在被使用时会缓存计算结果，在相关数据没有发生变化时不会重新计算，是一种更高效的方法。计算属性适用于一些可以通过其他数据计算出来的值。 `watch` 是监听器，它适用于需要在数据变化时执行异步或开销较大的操作的场景，它的行为是在数据发生变化时立即执行，而不是等待下一次 DOM 更新循环。 总的来说，`computed` 和 `watch` 都可以用来监听数据的变化，但 `computed` 更适用于简单的数据计算，而 `watch` 更适用于复杂的数据处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值