vue中computed和watch的区别,以及适用场景

ops/2025/2/11 11:30:20/

一、computed:通过属性计算而得来的属性

  1. computed内部的函数在调用时不加()。
  2. computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。
  3. computed中的函数必须用return返回。
  4. 在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了,就是data中的属性发生改变,从而触发computed中的函数,形成死循环了。
  5. 当computed中的函数所依赖的属性没有发生改变,那么调用当前函数的时候会从缓存中读取。

使用场景:当一个值受多个属性影响的时候------------购物车商品结算

二、watch:属性监听

  1. watch中的函数名称必须要和data中的属性名一致,因为watch是依赖data中的属性,当data中的属性发生改变的时候,watch中的函数就会执行。
  2. watch中的函数有两个参数,前者是newVal,后者是oldVal。
  3. watch中的函数是不需要调用的。
  4. watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变。也就是说,watch想要监听引用类型数据的变化,需要进行深度监听。“obj.name”(){}------如果obj的属性太多,这种方法的效率很低,obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
  5. 特殊情况下,watch无法监听到数组的变化,特殊情况就是说更改数组中的数据时,数组已经更改,但是视图没有更新。更改数组必须要用splice()或者 s e t 。 t h i s . a r r . s p l i c e ( 0 , 1 , 100 ) − − − − − 修改 a r r 中第 0 项开始的 1 个数据为 100 , t h i s . set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100,this. setthis.arr.splice(0,1,100)修改arr中第0项开始的1个数据为100this.set(this.arr,0,100)-----修改arr第0项值为100。
  6. immediate:true 页面首次加载的时候做一次监听。

使用场景:当一条数据的更改影响到多条数据的时候---------搜索框

三、区别:

  1. 功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。
  2. 是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。
  3. 是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。

使用场景:computed----当一个属性受多个属性影响的时候,使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候,使用watch-------搜索框。


http://www.ppmy.cn/ops/157511.html

相关文章

防御综合实验

1、实验拓扑图 2、实验步骤 需求一:完成IP配置 FW OA Web DNS PC1 Client2 需求二:DHCP分配IP 需求三:配置安全区域 需求四:防火墙地址组信息 DMZ区域 TrustA TrustB 需求五:管理员 配…

【大模型】Ubuntu下安装ollama,DeepSseek-R1:32b的本地部署和运行

1 ollama 的安装与设置 ollama官网链接:https://ollama.com/ 在左上角的【Models】中展示了ollama支持的模型在正中间的【Download】中课可以下载支持平台中的安装包。   其安装和模型路径配置操作流程如下: ollama的安装 这里选择命令安装curl -fsSL …

使用Spring boot的@Transactional进行事务管理

文章目录 一、前置条件二、基本用法1. 在方法上添加注解2. 在类上添加注解 三、核心配置参数1. 传播行为(Propagation)2. 隔离级别(Isolation)3. 超时时间(Timeout)4. 只读模式(readOnly&#x…

面试真题 | 超图骏科 C++

构造函数的类型及其描述 在C++中,构造函数是用于初始化对象的特殊成员函数。根据用途和参数的不同,可以将构造函数分为以下几种类型: 默认构造函数(Default Constructor) 描述:没有参数的构造函数。如果类中没有定义任何构造函数,编译器会自动生成一个默认构造函数。但…

JVM 中的各种收集器总结

在 Java 虚拟机(JVM)的垃圾回收体系中,垃圾收集器扮演着至关重要的角色,它们负责自动回收不再使用的内存空间,以确保 JVM 的高效运行。不同的垃圾收集器具有不同的特点和适用场景,了解它们的工作原理和特性…

随手记:小程序手机号一键登录

获取手机号码的前提&#xff1a; 非个人小程序 认证的小程序 非海外的企业认证 大致流程图 获取对应code <u-button type"primary" shape"circle" open-type"getPhoneNumber" lang"zh_CN" getphonenumber"getPhoneNumber&…

【AIGC魔童】DeepSeek v3提示词Prompt书写技巧

【AIGC魔童】DeepSeek v3提示词Prompt书写技巧 &#xff08;1&#xff09;基础通用公式&#xff08;适用80%场景&#xff09;&#xff08;2&#xff09;问题解决公式&#xff08;决策支持&#xff09;&#xff08;3&#xff09;创意生成公式&#xff08;4&#xff09;学习提升公…

Node.js开发属于自己的npm包(发布到npm官网)

在 Node.js 中开发并发布自己的 npm 包是一个非常好的练习&#xff0c;可以帮助我们更好地理解模块化编程和包管理工具&#xff0c;本篇文章主要阐述如何使用nodejs开发一个属于自己的npm包&#xff0c;并且将其发布在npm官网。在开始之前确保已经安装了 Node.js 和 npm。可以在…