Vue-8-前端框架Vue之应用基础响应式数据和计算属性

文章目录

  • 1 响应式数据
    • 1.1 ref创建基本类型的响应式数据
    • 1.2 reactive创建对象类型的响应式数据
      • 1.2.1 汽车示例(对象{})
      • 1.2.2 游戏示例(数组[])
      • 1.2.3 深层示例
    • 1.3 ref创建对象类型的响应式数据
    • 1.4 ref对比reactive
      • 1.4.1 区别和使用原则
      • 1.4.2 reactive重新分配新对象
      • 1.4.3 ref重新分配新对象
    • 1.5 toRefs和toRef
  • 2 计算属性
    • 2.1 计算属性(只读)
    • 2.2 计算属性(可读可写)

ref:可以定义,基本类型、对象类型的响应式数据。reactive:只能定义,对象类型的响应式数据。计算属性computed的两种写法:只读,可读可写。

在这里插入图片描述

1 响应式数据

ref:可以定义:基本类型、对象类型的响应式数据。
reactive,只能定义:对象类型的响应式数据。

1.1 ref创建基本类型的响应式数据

<template><div class="person">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/910099.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/910099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kotlin - 边界控制 coerceIn、coerceAtLeast、coerceAtMost

一、概念 当需要对数值进行范围限制时&#xff0c;通常会用 if() else if() else&#xff0c;这样会写很多判断&#xff0c;使用 coerceXXX() 函数来简化&#xff0c;适用于实现了 Comparable 接口的对象。 coerceIn() public fun <T : Comparable<T>> T.coerceIn(…

Day02_数据结构(手写)

01.画图 02.按位置查找返回元素的值 //11.按位置查找后返回元素的值 int find_pos(node_p H,int pos) { if(HNULL){return -1;} if(pos<0){ …

1.2 人工智能的分类

人工智能的类型 ANI 无需明确设计即可构建或训练&#xff0c;以执行特定任务或解决特定问题的智能系统。也被称为弱人工智能&#xff0c;因为它不具备全面的通用智能能力。 典型应用&#xff1a; 语音助手&#xff0c;图像识别系统、自动驾驶、机器人等。 大语言模型ChatGPT …

热点Key拆分方案实现

热点Key拆分方案实现 一、核心拆分策略 热点Key拆分的核心思想是将单个高频访问Key分解为多个子Key&#xff0c;分散存储到不同Redis节点&#xff0c;降低单节点压力。以下是具体实现方案&#xff1a; 二、实现方式 1. 业务层哈希分片实现 创建Key分片工具类&#xff0c;通…

程序人生,人生如戏

程序员的出路在哪里 很多计算机科班出身&#xff08;也有转行的&#xff09;同学&#xff0c;第一份工作都是研发&#xff0c;测试&#xff0c;项目管理之类的工作&#xff0c;这里面最多的应该就是从事研发相关的岗位。那我们就以研发岗来举例&#xff0c;聊聊我职业生涯从业…

传感器:基于STM32F103/407系AHT20温湿度传感器数据采集

一、IIC总线 1、IIC总线概念 I2C&#xff08;Inter&#xff0d;Integrated Circuit&#xff09;总线是由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备。是微电子通信控制领域广泛采用的一种总线标准。它是同步通信的一种特殊形式&#xff0c;具有…

很好,搞搞期末

我要开始啦&#xff01;bulabulabulabulabula. 例题 物理地址DS*16有效地址 1.直接寻址 2.直接寻址&#xff08;允许符号代替数值&#xff0c;变量存的地址&#xff09; 3.基址寻址&#xff08;16位&#xff1a;用寄存器SI、DI、BX、BP存的有效地址&#xff09; 下面是寄存器…

机器人如何实现智能化的自主定位与导航?

机器人实现智能化自主定位与导航&#xff0c;需融合多传感器数据、高效算法及硬件支撑&#xff0c;以下从技术框架、核心技术、典型应用场景等方面详细解析&#xff1a; 一、技术框架&#xff1a;定位与导航的核心环节 机器人自主定位导航通常包含三个关键步骤&#xff0c;形…

AI医疗行业全景图

AI医疗是以互联网为依托&#xff0c;通过基础设施的搭建及数据的收集&#xff0c;将人工智能技术及大数据服务应用于医疗行业中&#xff0c;提升医疗行业的诊断效率及服务质量&#xff0c;更好的解决医疗资源短缺、人口老龄化的问题AI在医疗领域应用广泛&#xff0c;覆盖医疗服…

Meta-KDD2025-RPG-token级别并行生成式提高效率!

文章目录 1. 背景2. 方法2.1 长语义id2.1.1 获取 item embedding2.1.2 item embedding 离散化 2.2 并行生成语义 id2.2.1 训练&#xff08;item串行&#xff0c;token并行&#xff09;2.2.2 高效 logit 打分暴力枚举式打分&#xff1a;高效实现&#xff1a;复杂度分析&#xff…

快速搭建MySQL8.0本地数据库,连接idea

1.打开终端&#xff0c;按顺序输入命令&#xff0c;在root用户下&#xff0c;创建用户和数据库 1.进入数据库 mysql -u root -p 2.创建专用数据库 create database 数据库名 character set utf8mb4 3.使用数据库 use 数据库名 4.设置此数据库用户 create user "用户名&q…

Docker 常用运维命令

Docker 提供了一系列命令来帮助开发者和运维人员管理容器、镜像以及其他 Docker 对象。以下是一些常用的 Docker 运维命令&#xff0c;这些命令可以帮助你更高效地进行日常操作&#xff1a; 容器相关命令 启动容器&#xff1a; docker start <container_id_or_name>停止…

linux下MQTT订阅发布验证-mosquitto安装测试流程

本文详细介绍了&#xff0c;如何在linux环境搭建一个MQTT server, 并同时安装 了客户端 &#xff0c;进行了mqtt消息发布、订阅验证。 mosquitto 服务端安装(ubuntu) #添加源 sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppasudo apt update # install mosquitto su…

Source Insight 的简单介绍

对 Source Insight 进行一次全面深入的介绍。这款软件在特定开发者群体中&#xff08;尤其是嵌入式、驱动、系统级编程领域&#xff09;享有极高的声誉&#xff0c;被誉为“源码阅读和分析的神器”。 一、 起源与历史 诞生背景 (1990年代中后期)&#xff1a; 在1990年代中后期…

Linux 系统中,查询 JDK 的安装目录

在 Linux 系统中&#xff0c;查询 JDK 的安装目录可以通过以下几种常用方法&#xff1a; 方法 1&#xff1a;通过 update-alternatives 查询&#xff08;推荐&#xff09; 适用于通过包管理器&#xff08;如 apt/yum&#xff09;安装的 JDK&#xff1a; sudo update-alternat…

简单工厂、工厂、抽象工厂模式

简单工厂、工厂、抽象工厂模式 1. **简单工厂模式&#xff08;Simple Factory&#xff09;**2. **工厂方法模式&#xff08;Factory Method&#xff09;**3. **抽象工厂模式&#xff08;Abstract Factory&#xff09;**对比总结 以下是三种工厂模式在C#中的实现与对比分析&…

如何在Redis中实现缓存功能

Redis 是一种高性能的键值存储系统&#xff0c;广泛用于实现缓存功能。它通过将数据存储在内存中&#xff0c;能够快速读写数据&#xff0c;从而显著提高应用程序的性能。在Redis中实现缓存功能需要结合数据读写策略、失效机制及性能优化方案。 一、Redis作为缓存的核心优势 …

Kafka消费者客户端源码深度解析:从架构到核心流程

在Kafka生态系统中&#xff0c;消费者客户端作为数据消费的入口&#xff0c;其设计与实现直接影响数据处理的效率和可靠性。本文将深入Kafka消费者客户端源码&#xff0c;通过核心组件解析、流程拆解与源码分析&#xff0c;揭示其高性能消费背后的技术奥秘&#xff0c;并辅以架…

从0开始学习R语言--Day26--因果推断

很多时候我们在探讨数据的相关性问题时&#xff0c;很容易会忽略到底是数据本身的特点还是真的是因为特征的区分导致的不同&#xff0c;从而误以为是特征起的效果比较大。 这就好比测试一款新药是否真的能治病&#xff0c;假如吃药的患者康复的更快&#xff0c;那到底是因为药…

Python 中布尔值的使用:掌握逻辑判断的核心

在 Python 中&#xff0c;布尔值&#xff08;bool&#xff09;是进行逻辑判断的基础。布尔值只有两个可能的值&#xff1a;True 和 False。通过布尔值&#xff0c;你可以实现条件判断、循环控制以及其他逻辑操作。今天&#xff0c;就让我们一起深入探讨如何在 Python 中使用布尔…