首页 > 其他分享 >Computed 和 Watch 的区别

Computed 和 Watch 的区别

时间:2023-01-11 15:01:08浏览次数:25  
标签:缓存 computed 区别 watch Watch 属性 数据 监听 Computed

1.computed计算属性:

作用:
(1)解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。

(2)它支持缓存,只有依赖的数据发生了变化,才会重新计算。例如模板中多次用到数据拼接可以用计算属性,只执行一次计算,除非数据发生变化。

(3)不支持异步,如果有异步操作,无法监听数据的变化。

(4)如果属性值是函数,默认使用get方法,函数的返回值就是属性的属性值。还有一个set方法,当数据变化时就会调用set方法。

(5)computed的值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data声明过,或者父组件传递过来的props中的数据进行计算的。

2.watch侦听器:

作用:
(1)它不支持缓存,数据变化时,它就会触发相应的操作。

(2)支持异步监听。

(3)接受两个参数,第一个是最新的值,第二个是变化之前的值。

(4)监听data或者props传来的数据,发生变化时会触发相应操作。有两个参数:

immediate:立即触发回调函数。

deep:深度监听,发现数据内部的变化,在复杂数据类型中使用,例如数组中的对象发生变化。需要注意的是,deep无法监听到数组和对象内部的变化。

3.总结:

(1)computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。

(2)watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。

4.computed与watch的使用场景:

computed:是多对一,多个数据影响一个。当需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算。

watch:是一对多,一个数据发生变化,执行相应操作会影响多个数据。当需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许执行异步操作 ( 访问一个 API ),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

标签:缓存,computed,区别,watch,Watch,属性,数据,监听,Computed
From: https://www.cnblogs.com/bisiyuan/p/17043788.html

相关文章

  • jQuery属性(attr和prop的区别)
    视频text()得到文本BBBBB,html()得到标签BBBBBattr():专门操作属性值为非布尔值的属性。prop():专门操作属性值为布尔值的属性。<!DOCTYPEhtml><html><head>......
  • LeetCode刷题:AddressSanitizer: heap-buffer-overflow问题请教||全局变量和引用传递的
    在刷https://leetcode.cn/problems/sudoku-solver/description/遇到AddressSanitizer:heap-buffer-overflow的报错。代码为://本题思路就是简单的回溯//注意限制:只......
  • Windows窗体应用类型的差异区别
    最近在写小工具的时候,遇到一个坑点,项目的Debug/Release目录下一直有一个文件:项目名.runtimeconfig.json,还无法删除!删除了exe就跑不起来。我写一个小工具,2M以内,希望双击EXE......
  • 裙带菜与海带的区别 All In One
    裙带菜与海带的区别AllInOne科属不同裙带菜和海带都属于大型可食用海藻,但是从属于不同的科目。裙带菜属于1年生海藻植物,而海带属于多年生海藻植物,这一点是二者的本......
  • OpenCV中的常用的浅拷贝和深拷贝操作和区别
    OpenCV中的常用的浅拷贝和深拷贝操作和区别在OpenCV中,Mat类使用非常广泛,对于Mat容器的拷贝方式将对程序运行效率产生很大的影响,在Mat中效率最高的浅拷贝,效率较低的是深拷......
  • Vue中组件和插件的区别
    一、组件是什么1:组件的定义:组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件2:组件的优势......
  • 在路径中 斜杠/和反斜杠\ 的区别
    路径中斜杠/和反斜杠\的区别路径中使用斜杠/和反斜杠\的区别到底是什么?用途不同1、“\”:“\”只能用来表示目录。2、“/”:“/”技能作为除法符号或者间隔符号使用,也能用......
  • 5. C语言scanf gets输入字符串的区别
    1.scanf这种格式串不能接收带空格的字符串,比如输入"abc123678"的话,字符串只会接收到abc,遇空格就结束2. 使用 gets() 时,系统会将最后“敲”(Enter)的换行符从缓冲区中......
  • setTimeout与setInterval的区别
    setTimeout定义和用法setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout方法接收两个参数,第一个参数为回调函数函数或字符串,第二个参数为触发时间(......
  • FirstOrDefault 和 First 区别
    First方法:返回List集合序列中的第一个符合条件的元素,如果没有查找到,则抛出运行时异常。FirstOrDefault方法:返回List集合序列中的第一个符合条件的元素,如果没有查找到,则返......