Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] watch和计算属性有什么区别? #264

Open
haizhilin2013 opened this issue Jun 16, 2019 · 12 comments
Open

[vue] watch和计算属性有什么区别? #264

haizhilin2013 opened this issue Jun 16, 2019 · 12 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] watch和计算属性有什么区别?

@haizhilin2013 haizhilin2013 added the vue vue label Jun 16, 2019
@wenyejie
Copy link

watch: 看你怎么做, 然后做出某些相应的调整
computed: 根据内部调用变更返回结果, 总的来说, 是根据一些变更最后调整自身

@Ricemonster
Copy link

  1. 一个是侦听属性,一个是计算属性
    2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应
    3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行
    4.一个有缓存,一个没有缓存

@zhaofeipeter
Copy link

zhaofeipeter commented Aug 3, 2020

watch可以深度监听复杂对象的变化;
computed只能监听简单简单对象的变化

@qq-radio
Copy link

qq-radio commented Jan 4, 2021

还可以问methods、watch、computed区别

@aier-nan
Copy link

我认为computed:1、它是依靠依赖项的变化,来对自己做出改变 2、它具有缓存
watch:1、它是通过它监听的属性变化,来对属性做出改变 2、它不具有缓存

@dealdot
Copy link

dealdot commented Apr 9, 2021

https://cn.vuejs.org/v2/guide/computed.html

这里的demo 说的很清楚了,能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候,一般在异步时使用

@yxllovewq
Copy link

主要区别:
computed更常用、相对于watch更简单,但不能调用异步函数。
watch主要负责复杂和庞大的数据处理、可以调用异步函数。

@jiefancis
Copy link

1、定义:watch是侦听属性、computed是计算属性
2、缓存:watch没有缓存、computed有缓存
3、触发时机:侦听的数据发生改变,computed在缓存发生改变时执行
4、同步异步:watch一般监听数据变化来执行异步等操作,computed一般用域同步更改简单数据的场景

@wenjiechen0913
Copy link

https://cn.vuejs.org/v2/guide/computed.html

这里的demo 说的很清楚了,能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候,一般在异步时使用
https://v2.cn.vuejs.org/v2/guide/computed.html

1 similar comment
@wenjiechen0913
Copy link

https://cn.vuejs.org/v2/guide/computed.html

这里的demo 说的很清楚了,能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候,一般在异步时使用
https://v2.cn.vuejs.org/v2/guide/computed.html

@wenjiechen0913
Copy link

https://cn.vuejs.org/v2/guide/computed.html

这里的demo 说的很清楚了,能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候,一般在异步时使用
https://v2.cn.vuejs.org/v2/guide/computed.html

https://cn.vuejs.org/v2/guide/computed.html

这里的demo 说的很清楚了,能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候,一般在异步时使用

计算属性是一个新的属性,其属性值依赖于其他属性,监听属性可以监听data属性或者computed计算属性中,是对于这些属性的监听,也就是这些属性一旦改变就执行回调函数,可以处理异步,但是计算属性只能是同步的。计算属性是可以缓存的。

@Cai-zhiji
Copy link

在Vue中,watch 和计算属性(computed)都用于监视数据的变化并触发相应的操作

区别

计算属性(computed):

计算属性是基于依赖的数据进行计算得出的一个新值。
计算属性会进行缓存,只有在依赖的数据发生变化时才会重新计算。
计算属性是响应式的,当依赖的数据发生变化时,会自动更新相关的计算属性。
计算属性适合处理需要经过复杂逻辑计算得出的数据,并且希望在数据没有变化时重复使用该值。

Watch(侦听器):
Watch 监听特定的数据,当该数据发生变化时执行相应的操作。
Watch 通过在选项对象中使用 watch 属性定义。
Watch 可以监听数据的变化,并在变化后执行指定的回调函数。
Watch 更适合处理数据的变化需要执行异步操作、复杂逻辑或依赖多个数据的情况。

总结来说,计算属性适合处理基于数据的实时计算逻辑,它会根据依赖的数据进行缓存和自动更新。而 Watch 适合处理数据变化后需要执行异步操作、复杂逻辑或依赖多个数据的情况。选择使用哪种方式取决于具体的业务需求和代码结构的设计。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests