Vue中methods computed 和 watch 的区别
admin
2023-02-13 04:00:06
0

methods :执行多次调用的时候 ,当数据没有发生变化,计算属性里面的函数只需要执行一次,而methods调用几次,就执行几次,哪个性能更高?vue内部是对计算属性做了一层缓存的,它会观察数据有没有发生变化,如果没有变化的话,会吧原来的结果直接返回出去,而不是重新计算下,如果你不希望有缓存,请用方法代替

computed: 依赖追踪机制为基础 根据a的值变化 计算出新的值 默认是以get 方法 必须要有return 而且不支持异步 ,基于它们的依赖进行缓存,只有它的相关依赖改变时才会重新求值,为什么需要缓存?假设我们有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组并做大量的计算,然后我们可能有其他的属性依赖与A,如果没有缓存,我们将不可避免地多次执行A的getter,多个数据影响一个数据(狐朋狗友带坏你)。某【一些】变量发生变化时,影响的【单个】结果对应地发生改变。计算属性一般没有set方法,只读属性。

watched: 依赖追踪机制为基础 观察a的值变化 当a的值变化时,干一件事 ,也叫观察者、侦听器,属性名要和被观察的值的名字一致 a(newVal,oldVal){ },只有值变化的时候才会触发变化,支持数据变化时执行异步,有关计算的事watch做起来比较麻烦,用computed做计算比较简单,监听的对象个数:watch只对一个对象进行监听,computed对多个对象进行监听(如果有两个对象其中任意一个做变化,且不管其中哪个对象变化都是做相同的动作的时候应该怎么办呢,把这两个对象写在一个对象里面,再watch这个对象,多个watch之间应该尽量避免数据耦合),在某些情况下,确实需要跟踪观察值的变化,确实要知道变化前的值和变化后的值,那么就需要使用watch。比如我现在子组件中,需要实现这样一个功能,如果props中的某个对象发生了变化,那么就触发对应的methods。那么这个时候你需要用什么方法来触发对应的methods呢,这里很显然需要使用watch。当你想要在数据变化响应时,执行异步操作或开销较大的操作,选择使用watch,一个数据影响多个数据(一粒老鼠屎糟蹋一锅粥)。适合监控场景,某【一个】变量改变时需要做什么操作;类似于onchange,适合耗时操作,如网络请求等。所以每个方法的存在,都是根据业务场景来的。

相关内容

热门资讯

德国总理:美国正在被伊朗羞辱 德国之声4月27日报道,德国总理默茨在访问一所学校时表示,在当前的持续冲突中,伊朗领导层正试图羞辱美...
理响中国|“长”歌以行,风云激... 光阴如梭,东方潮阔。这里是中国的长三角,世界的长三角。无论过去、现在还是未来,这片土地都因时代而生,...
白宫:特朗普及其国安团队开会讨... 新华社华盛顿4月27日电 美国白宫新闻秘书莱维特27日在记者会上证实,总统特朗普及其国家安全团队当天...
人民日报刊文:日本放开杀伤性武... 日本放开杀伤性武器出口推高地缘冲突风险(国际论坛)常思纯《人民日报》(2026年04月28日 第 0...
医疗保障法草案二审:明确生育保... 满足多样化健康保障需求本报记者 彭 波4月27日,医疗保障法草案二审稿提请十四届全国人大常委会第二十...
天津一景区发生自转旋翼机事故1... 澎湃新闻记者 吕新文中国民用航空华北地区管理局4月22日公布《豪客通航“10•1”天津长芦汉盐旅游区...
卡塔尔埃米尔与美国总统特朗普通... 当地时间24日,卡塔尔埃米尔塔米姆与美国总统特朗普通电话,重点就中东地区局势以及伊朗与美国谈判问题交...
男子30年前被扣押2859克黄... 澎湃新闻记者 王鑫家住辽宁省大连市的潘永嘉近日向澎湃新闻反映称,三十年前,他在大连周水子机场被盖州市...
商务部:取消反制欧盟两家金融机... 中华人民共和国商务部令二〇二六年 第1号鉴于欧盟已取消对中国两家金融机构的制裁措施,现公布《关于取消...
过去24小时共有5艘船只通过霍... 总台记者当地时间24日获悉,过去24小时内,共有5艘船只通过霍尔木兹海峡,其中包括一艘伊朗油轮。(总...