Vue的compute和watch的区别

最新推荐文章于 2024-06-15 11:46:27 发布
最新推荐文章于 2024-06-15 11:46:27 发布
阅读量358 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40721240/article/details/131165934
版权

相同点：

都是基于依赖收集机制，根据依赖的变化而变化。

不同点：

写法上：compute必须有return值

                watch不一定

输入输出：compute是多入单出

                  watch是单入多出

缓存：compute 使用diff算法，没有变化时直接从缓存中取值

            watch 只要变化就执行

执行性：compute 页面初始化会执行

                watch 不会执行，加immdeate才可以理解执行

亭一婷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
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.缓存： 如果依赖的属性没有
Vue3中的computed函数详解
linfeng_meng的博客
09-19 2717
computed函数是Vue3中的一个内置函数，它主要用于创建一个计算属性。通过使用computed函数，我们可以方便地创建一个计算属性，使代码更为简洁和可读。computed函数在组件实例中函数式声明，只要该计算属性依赖的响应式变量发生变化，它就会自动更新。
Vue系列之 computed 和 watch 区别
老__L的博客
03-16 443
computed 和 watch 区别
简述Vue中method和compute以及watch的区别
qq_68186353的博客
11-26 587
vue中methods和computed以及watch的区别
vue compute watch
u014105739的博客
12-08 106
学习参考：计算属性和侦听器 | Vue.js compute 计算属性 有缓存， 默认get 方法 也可以设置 set方法 computed: { newData: { set(val) { console.log('set新数据', val) this.callbacks = val }, get() { console.log('get新数据') return this.callback..
vue的computed和watch的区别
热门推荐
weixin_44063225的博客
07-06 1万+
computed和watch都是vue框架中用于监听数据变化的属性
vue compute和watch共用监听对象的多个属性
沉默的鑫的博客
11-05 394
引言 这周写的编辑页面时，给后端传值的时候需要传个字段，用来判断增加的信息的状态，但是这个字段的传的1还是0，是根据用户编辑的是前4个条件还是后4个条件判断的。这就要监听所传对象的多个对象，利用compute和watch即可实现，特此记录一下。 实现过程 data(){ return { airFormData: { courseName: "", provinceId: "", lanId: "", userId: "",
Vue2-computed和watch区别（通俗易懂）
qq_63943166的博客
01-26 1031
watch和computed的区别
谈谈VUE种methods watch和compute的区别和联系
08-29
本篇文章主要介绍了谈谈VUE种methods watch和compute的区别和联系，具有一定的参考价值，有兴趣的可以了解一下
Vue的watch和computed方法的使用及区别介绍
10-18
Vue的watch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vue的watch和computed方法的使用及区别,需要的朋友可以参考下
vue中watch和computed的区别与使用方法
10-14
主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
详解Vue中的watch和computed
01-22
对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过源码来分析这三者的背后实现原理，...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 374
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 531
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 257
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 337
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
最新发布
lyd的博客
06-15 203
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
vue3 compute和watch区别
04-18
Vue3中的computed属性和watch属性都是用于响应式数据处理的。 Computed属性是一个计算属性，它依赖于Vue实例中的其它数据，当数据变化时会触发计算操作，返回一个计算结果。它的优点是可缓存，只有依赖的数据发生变化时才会重新计算，而且可以像普通属性一样使用。 Watch属性用于观察数据的变化，当数据发生变化时会执行回调函数。它的优点是灵活性高，可以在回调函数中执行任何操作，而且可以对对象或数组的特定属性进行观察。 因此，Computed适合用于需要根据数据计算出来的结果，而Watch适合用于需要在数据变化时执行特定操作的场景。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值