vue中computed与watch的区别

最新推荐文章于 2025-07-24 19:56:56 发布
原创 最新推荐文章于 2025-07-24 19:56:56 发布 · 156 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在项目中使用Computed和Watch的差异，重点分析了两者在getter和setter机制上的不同，以及Watch提供的深度监听能力，这是Computed所不具备的。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

        首先在项目中的运用,他们两我感觉没有什么差别,wach能实现的computed基本也能很好的实现,但computed的简单用法只调用了getter机制,而watch同时执行了getter与setter机制,而且watch提供了深度监听的能力,这是computed无法实现的

Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
【前端】Vue中Computed和Watch的区别
LeonNo11的博客
03-12 1193
变化并作出相应的计算或操作。但两者的适用场景不同，以下是它们的详细对比。（监听）都是响应式数据的处理方式，它们可以用于监听。计算出来的数据依赖于异步请求返回的结果，而。，可以让 Vue 应用更高效、易维护。可以监听异步数据更新后，通知。，例如字符串拼接、数组过滤等。（如在数据变化后请求服务器）。，只有依赖变更时才计算一次。，甚至是对象的某个属性变化。在 Vue 开发中，
在微信小程序里使用 watch 和 computed
weixin_34144848的博客
03-31 1618
在开发 vue 的时候，我们可以使用 watch 和 computed 很方便的检测数据的变化，从而做出相应的改变，但是在小程序里，只能在数据改变时手动触发 this.setData()，那么如何给小程序也加上这两个功能呢？ 我们知道在 vue 里是通过 Object.defineProperty 来实现数据变化检测的，给该变量的 set...
vue中computed和watch区别
qq_25416827的博客
06-15 360
computed用于声明式计算属性，有缓存。watch用于监听响应式数据的变化并执行副作用逻辑，无缓存。场景使用建议根据已有状态组合出一个新值computed响应数据变化并执行副作用（如请求）watch想避免重复计算，提高性能computed想监控某个数据的变化并执行一些逻辑watch。
Vue中computed与watch区别7点不同
qq_39762109的博客
09-28 657
3、computed中每个属性都可以设置set与get方法，属性的属性值是函数，函数返回值为属性的属性值；watch监听的数据必须是data中声明过或父组件传递的props数据，数据变化触发监听器；6、是否支持异步：computed不支持异步，当computed内有异步操作的时是无法监听数据变化的；4、是否调用return：computed中的函数必须使用return返回，watch中的函数不是必须用return；1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调；
Vue中computed和watch的区别
qq_33788547的博客
10-25 385
计算属性注重在一个值变化时改变另一个值,在依赖发生变化时或vue初始化时会执行，执行时使用的是依赖项的newValue而非oldValue,必须return一个值,无法异步执行,2）深度监听:如果监听的属性为一个包含多个子属性的对象时,如果需要在子属性发生变化时触发watch监听事件,则需要显式的配置deep:true。1）注重对data或computed中的属性的监听,相当于给属性配置一个onchange事件,在监听的属性值发生变化时执行,必须是同步方法,无法用于更改dom(更改dom应该是异步方法)
Vue 里 computed 和 watch 的区别
最新发布
jialiang808的博客
07-24 288
使用场景：computed当一个属性受多个属性影响的时候；是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用。功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调。computed和watch都是vue框架中用于监听数据变化的属性。watch的函数名必须和data中的数据名一致。watch中的函数有俩个参数，新旧。watch中的函数是不需要调用的。
vue中computed和watch的区别
qq_55869426的博客
02-03 1043
只间听数据的值是否发生变化，不会监听的数据的地址是否发生变化，数据结构比较深的话需要深度监听设置deep:true。computed函数所依赖的属性不变的时候会调用缓存；watch可以监听data中数据的值也可以监听computed计算属性的值，必须与数据的值一样。使用方法和data中的数据一样，可以做执行方法，对其进行传值接收进行处理。computed是计算属性，watch是监听一个值的变化而执行对应的回调。computer和watch都是vue监听数据变化的属性。三、watch监听属性。
Vue中computed和watch的区别_watch computed
2401_84617080的博客
06-15 350
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。3、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。，数据变，直接会触发相应的操作；
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
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
分享几个vue大数据表格插件，并分析其优缺点
热门推荐
qq_38761664的博客
04-11 1万+
一.vue-bigdata-table 插件介绍地址： https://juejin.im/post/5ad876a36fb9a045df1720b9 gitHub地址： https://github.com/lison16/vue-bigdata-table 优点：功能完善支持拖动修改列宽、固定列不横向滚动，固定表头、内置排序、编辑单元格、...
vue 中自定义指令改变data中的值
qq_38761664的博客
06-02 5302
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding){ //el为拖动的元素 var oDiv =el;  oDiv.onmousedown = functio
provide与inject的使用
qq_38761664的博客
07-02 2250
在父组件中，在provide中提供变量name='parentData'' 在子组件中通过inject接收 d页面显示结果 如果需要出入当前组件内数据，则需要写成一下方式 需要注意的是当前传入的是对象是才能完成父子组件的值的双向绑定。展现结果 点击后变为22222 ...
v-model语法糖介绍，实现一个自定义input组件
qq_38761664的博客
09-15 958
html: <template> <div class="jsInput"> <div class="jsInput-content"> <input class="my-input" :type="type" @focus="handlerFocus" @blur="handlerBlur&q
vue实现拖放效果
qq_38761664的博客
09-15 844
html： <template> <div class='drag-content'> <div class='project-content'> <div v-for='(tag,index) in tags' class="item-box"> <div @click.stop="hadnlerClick" class='sele
es6 浅度复制解决单层级双向绑定问题
qq_38761664的博客
05-12 745
当我们利用v-bind：来绑定属性向子组件传递对象的时候，有时候我们需要子组件改变的时候不改变父组件的值，一般可以利用JSON.stringify(JSON.parse(jsonstr))将传递来的对象赋值到子组件自己的data，这样做的原理是对传过来的值重新赋予一个空间，从而解决双向绑定。，但是es6有一个深度赋值的方法也可以解决这个问题,let obj= Object.assign({}, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值