当前位置: 首页 > news >正文

vue 中computed和watch的区别

computed与watch的区别

首先,computed是计算属性,watch是监听,监听data中的数据变化。

computed的计算属性它支持缓存,只有当依赖项发生改变的时候,它才会重新计算,否则它用的就是缓存的值。watch不支持缓存,当被监听的数据发生变化的时候,watch 才会执行。

computed第一次加载的时候就执行一次,watch初次加载时,不执行。但是vue提供了一种immediate的属性,开启初次加载时执行,还有一个开启深度监听的属性deep(开启深度监听,监听的引用类型的数据,即对象的子属性发生变化,就会触发watch)。

computed中的函数必须return出结果,而watch只是调用对应的函数,函数中可以写异步。所以,这也经常是很多人说watch支持异步的操作。

computed是一个属性受到多个属性的影响,用的最多的就是购物车,watch 一个数据影响多条数据,如搜索,高性能的消耗操作,watch为最佳。

computed

 data() {return {message: 'Hello'};},
computed: {message () {return this.message.split('').reverse().join('')},},
<template><div class="person">姓:<input type="text" v-model="firstName"> <br>名:<input type="text" v-model="lastName"> <br>全名:<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为:li-si</button></div>
</template>
<script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 计算属性——只读取,不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */// 计算属性——既读取又修改let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'} 
</script>

watch

参观下面的网址(个人觉得挺好)

Vue中的watch监听属性,使用详细(vue2和vue3监听属性watch的使用)_vue2 watch deep-CSDN博客

相关文章:

vue 中computed和watch的区别

computed与watch的区别 首先&#xff0c;computed是计算属性&#xff0c;watch是监听&#xff0c;监听data中的数据变化。 computed的计算属性它支持缓存&#xff0c;只有当依赖项发生改变的时候&#xff0c;它才会重新计算&#xff0c;否则它用的就是缓存的值。watch不支持缓…...

富豪王思聪的“爱情喜剧”从万达排片到网红聊天

王思聪&#xff0c;这位人生如戏、戏如人生的富二代&#xff0c; 在爱情的战场上可谓是屡战屡败&#xff0c;屡败屡战。 想当年&#xff0c;他向戚薇发起了猛烈的爱情攻势&#xff0c; 豪言壮语道&#xff1a;“若我以万达25%的排片量换你一笑&#xff0c;你可愿与我共舞&am…...

qt qml-http之XMLHttpRequest介绍详解使用

文章目录 QML中的XMLHttpRequest详解与示例基本用法示例代码代码详解更复杂的示例:POST请求代码详解结论QML中的XMLHttpRequest详解与示例 XMLHttpRequest 是 QML 中用于执行HTTP请求的一种机制,类似于Web中的AJAX。它可以用来进行异步的数据传输,可以从服务器获取数据,也…...

DBdoctor功能介绍

绍DBdoctor的主要功能&#xff0c;按照事件先后涵盖了事前、事中、事后三个阶段。事前的主动问题发现、SQL性能评估、自动巡检与报表、空间预测与诊断&#xff1b;事中的性能洞察、根因诊断、锁分析、优化建议&#xff1b;事后的审计分析、根因推导、问题快照。按照使用者包含了…...

Kubernetes之Kubelet详解

本文尝试从Kubelet的发展历史、实现原理、交互逻辑、伪代码实现及最佳实践5个方面对Kubelet进行详细阐述。希望对您有所帮助&#xff01; 一、kubelet发展历史 Kubelet 是 Kubernetes 中的核心组件之一&#xff0c;负责管理单个节点上的容器运行。它的发展历史和功能演进是 K…...

大模型AI技术实现语言规范练习

人工智能技术可以为语言规范练习提供多种有效的解决方案&#xff0c;帮助学习者更有效地掌握语言规范。以下是一些常见的应用场景。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 智能纠错 利用自然语言处理技术&#xff0c;可以…...

202.回溯算法:全排列||(力扣)

class Solution { public:vector<int> res; // 存储当前排列vector<vector<int>> result; // 存储所有排列// 回溯函数&#xff0c;用于生成排列void backtracing(vector<int>& nums, vector<bool>& used) {// 如果当前排列的长度等于 n…...

什么是数据库范式,为什么要反范式?

一、典型回答 数据库范式其实是数据库的设计上的一些规范&#xff0c;这些规范可以让数据库的设计更加简洁、清晰&#xff0c;同时也会更好的保证一致性。 二、三范式 第一范式&#xff08;1NF&#xff09;&#xff1a;数据库表中的属性的原子性&#xff0c;要求属性具有原子性…...

记录 Bonobo Git 服务器 SMTP 设置

Bonobo 使用标准的 .NET SMTP 设置&#xff0c;可以在 web.config 中指定这些设置。 <system.net><mailSettings><smtp deliveryMethod"network" from"bonobobonoserver.your.domain"><network host"accessible.smtp.host"…...

事务性邮件发送如何选择邮件群发工具

在数字营销的海洋中&#xff0c;事务性邮件如同灯塔&#xff0c;指引着用户在与品牌的互动中前行。它们是自动化的使者&#xff0c;及时响应用户的行为&#xff0c;传递关键信息。然而&#xff0c;选择正确的邮件群发工具&#xff0c;是确保这些信息有效传达的关键。本文将带您…...

替换特殊符号

content content.replaceAll("[\\x00-\\x09\\x11\\x12\\x14-\\x1F\\x7F]", ""); 打印特殊符号&#xff1a; String s new String( Character.toChars(0)); System.out.println((char)0); 2024-06-20 17:21:26.155 ERROR 5584 --- [6884333_inbound] c.…...

深入浅出 langchain 1. Prompt 与 Model

示例 从代码入手来看原理 from langchain_core.output_parsers import StrOutputParser from langchain_core.prompts import ChatPromptTemplate from langchain_openai import ChatOpenAI prompt ChatPromptTemplate.from_template("tell me a short joke about…...

C#二进制、十进制、十六进制数据转换

目录 1、10进制整数转二进制BOOL数组 2、二进制BOOL数组转10进制整型 3、10进制转16进制字符串 4、16进制字符串转10进制 5、16进制字符串转二进制BOOL数组 6、二进制BOOL数组转16进制字符串 1、10进制整数转二进制BOOL数组 /// <summary>/// 10进制整数转二进制BO…...

晶方科技:台积电吃饱,封装迎春?

半导体产业链掀起涨价潮&#xff0c;先进封装迎接利好。 这里我们来聊国内先进封装企业——晶方科技。 近期&#xff0c;由于产能供不应求&#xff0c;台积电决定上调先进封装产品价格&#xff0c;还表示订单已经排到2026年。 大哥吃不下了&#xff0c;剩下的订单全都是空间。…...

ConcurrentModificationException

正在用Iterator迭代器循环操作的集合不能调用集合的删除方法&#xff0c;否则就会报异常&#xff1a;ConcurrentModificationException。 (调用迭代器的remove方法可以) package test;import java.io.*; import java.util.*;public class Demo {public static void main(Strin…...

倾斜摄影OSGB一键轻量化输出3dTiles!

老子云为打通OSGB应用通路&#xff0c;研发了OSGB格式一键转换3dTiles技术服务&#xff0c;通过轻量化操作即可快速实现格式间的转换&#xff0c;并且转换后模型可直接使用amrt展示框架加载、二次开发深度应用&#xff0c;此项服务已在平台上线&#xff0c;欢迎用户体验。接下来…...

深度清洁:使用npm prune命令优化你的Node.js项目

标题&#xff1a;深度清洁&#xff1a;使用npm prune命令优化你的Node.js项目 在Node.js的世界中&#xff0c;随着项目的不断扩展&#xff0c;package.json文件中的依赖项可能会变得冗余和膨胀。未使用的依赖项不仅会占用不必要的磁盘空间&#xff0c;还可能引入安全风险。幸运…...

[Gstreamer] gstbasesink 的 QOS 机制

前言&#xff1a; gstreamer里很多element都提供 QOS 机制&#xff0c;src&#xff0c;filter 和 sink 都有。Sink element 的 QOS 机制由 gstbasesink 统一提供。 qos (quality of service) 是一种评价机制&#xff0c;这个领域中都有这一概念&#xff0c;比如网络的qos。…...

关于bash脚本中extglob不生效的问题

在bash脚本中&#xff0c;我们可以通过&#xff1a; shopt -s extglob 为后续代码提供通配功能。 但如果在block中设置&#xff0c;将不会生效。如&#xff1a; if true; thenshopt -s extglob... fi这是因为&#xff1a; you cannot put shopt -s extglob inside a statement…...

idea运行报错 java: 错误: 无效的源发行版:16

1、打开File——>Project Structure——>Project&#xff1b;选择电脑安装的JDK版本。 并检查File——>Project Structure——>Modules的JDK版本...

ARM Cortex-X4/X925处理器仿真模型与指令集详解

1. ARM Cortex-X4/X925处理器仿真模型概述处理器仿真模型在现代芯片设计中扮演着至关重要的角色&#xff0c;特别是在Arm架构的生态系统中。作为Arm最新一代高性能核心&#xff0c;Cortex-X4和X925的Iris仿真组件提供了完整的指令集和微架构行为建模&#xff0c;使开发者能够在…...

物联网安防系统故障排查与ESP8266固件刷写实战指南

1. 物联网安防系统故障排查实战做物联网安防系统&#xff0c;最怕的就是“哑火”。你花了好几天时间&#xff0c;把ESP8266、Raspberry Pi、MQTT Broker、Adafruit.IO和IFTTT像搭积木一样连起来&#xff0c;满心期待它能在关键时刻给你发条短信。结果&#xff0c;门被推开了&am…...

AI原生代码库OpenCode:从代码生成到项目级协同的开发新范式

1. 项目概述&#xff1a;一个面向开发者的AI原生代码库最近在GitHub上看到一个挺有意思的项目&#xff0c;叫opencode-ai/opencode。光看名字&#xff0c;你可能会觉得这又是一个“AI写代码”的工具&#xff0c;或者是一个AI模型的代码仓库。但如果你点进去仔细研究一下&#x…...

CC2530与ESP8266物联网网关:ZigBee转Wi-Fi通信协议转换实战

1. 项目概述&#xff1a;当ZigBee遇上Wi-Fi最近在折腾一个智能家居的传感器节点&#xff0c;核心是TI的CC2530 ZigBee芯片。这玩意儿功耗低、组网方便&#xff0c;是很多低功耗传感网络的绝佳选择。但问题来了&#xff0c;ZigBee网络的数据最终怎么方便地送到我们手机上去看呢&…...

基于MCP协议构建Reddit社区趋势分析工具:架构、部署与应用

1. 项目概述&#xff1a;一个实时洞察社区脉搏的利器最近在做一个社区运营相关的项目&#xff0c;需要实时追踪几个特定话题在Reddit上的讨论热度变化。手动刷帖、统计关键词频率这种笨办法效率太低&#xff0c;而且很难量化趋势。就在我琢磨着是不是要自己写个爬虫加分析脚本的…...

AI代码管理器:统一多模型编程助手,提升开发效率与代码质量

1. 项目概述&#xff1a;一个面向开发者的多模型代码管理技能最近在折腾AI编程助手&#xff0c;发现一个挺有意思的现象&#xff1a;很多开发者手头可能同时用着Claude、CodeGemini这类工具&#xff0c;但每次切换都得重新配置环境、调整提示词&#xff0c;甚至要处理不同模型输…...

长期使用后回顾,Taotoken账单明细对项目财务核算的实际帮助

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 长期使用后回顾&#xff0c;Taotoken账单明细对项目财务核算的实际帮助 对于一个持续数月、深度依赖大模型能力的项目组而言&#…...

用Circuit Playground Express制作可穿戴互动闪光T恤:零焊接图形化编程入门

1. 项目概述&#xff1a;一件会“跳舞”的闪光T恤几年前&#xff0c;当我第一次把微控制器缝进衣服里时&#xff0c;那感觉既兴奋又麻烦——满桌子的电线、烙铁&#xff0c;还有对洗衣机深深的恐惧。但现在&#xff0c;像Adafruit的Circuit Playground Express&#xff08;后面…...

Linux驱动开发:原子操作实现LED设备互斥访问

1. 项目概述&#xff1a;用原子操作给LED驱动加把“锁”在嵌入式Linux开发里&#xff0c;驱动开发是绕不开的一环。很多时候&#xff0c;一个硬件设备&#xff0c;比如一个简单的LED灯&#xff0c;可能会被多个用户空间的应用程序同时访问。想象一下&#xff0c;一个APP想开灯&…...

Node.js性能预测工具nodestradamus:从监控到预警的实践指南

1. 项目概述与核心价值最近在折腾一些服务器监控和性能预测的活儿&#xff0c;偶然间在GitHub上发现了一个叫nodestradamus的项目&#xff0c;作者是ChristosGrigoras。这个名字挺有意思&#xff0c;结合了“Node.js”和“诺查丹玛斯”&#xff08;那位著名的预言家&#xff09…...