Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

wenyejie

wenyejie commented on Jun 17, 2019

@wenyejie

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

Ricemonster

Ricemonster commented on Jul 26, 2019

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

zhaofeipeter commented on Aug 3, 2020

@zhaofeipeter

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

radio-qq

radio-qq commented on Jan 4, 2021

@radio-qq

还可以问methods、watch、computed区别

aier-nan

aier-nan commented on Jan 25, 2021

@aier-nan

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

dealdot

dealdot commented on Apr 9, 2021

@dealdot

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

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

yxllovewq

yxllovewq commented on Mar 9, 2022

@yxllovewq

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

jiefancis

jiefancis commented on Aug 16, 2022

@jiefancis

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

wenjiechen0913

wenjiechen0913 commented on May 10, 2023

@wenjiechen0913

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

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

wenjiechen0913

wenjiechen0913 commented on May 10, 2023

@wenjiechen0913

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

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

wenjiechen0913

wenjiechen0913 commented on May 11, 2023

@wenjiechen0913

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

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

在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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@dealdot@zhaofeipeter@jiefancis

        Issue actions

          [vue] watch和计算属性有什么区别? · Issue #264 · haizlin/fe-interview