Vue全流程--Vue3组合一ref与reactive(实现响应式)

embedded/2025/2/21 7:33:47/

ref:定义基本类型的响应式数据

先看ref使用的位置

<script >
import {ref} from 'vue'
export default {name: 'App',setup(){//数据let name = ref('张三')let age = ref(18)//方法function changeInfo(){// name = '李四'// age = 48console.log(name,age)}//返回一个对象(常用)return {name,age,changeInfo}}}
</script>

从控制台我们可以看到Vue3中用ref包裹的数据会以引用数据的形式给出。

而我们要修改的值就在value中。

所以我们需要对代码稍加修改,在属性值后面加上“.value”

function changeInfo(){name.value = '李四'age.value = 48}

reactive:定义对象式响应式数据

let job = reactive({type:'前端工程师',salary:'30K'})

reactive(源对象)。返回的是一个代理对象(proxy对象)

reactive可以相应深层次的数据({{{对象里面套对象的那种情况}}}


http://www.ppmy.cn/embedded/162302.html

相关文章

KaiOS 4.0 APN List 界面加载debug

问题背景 在列表选中APN进入编辑后,退出返回列表界面时无法焦点选中编辑的APN。 代码分析 路径:gaia/apps/settings/js/panels/apn_list/panel.js 分析SettingsPanel界面加载的步骤逻辑 onBeforeShow -> onShow -> onBeforeHide -> onHide return SettingsPanel(…

Unity-Mirror网络框架-从入门到精通之PickupsDropsChilds示例

文章目录 前言示例介绍PickupsDropsChildsSceneObject最后前言 在现代游戏开发中,网络功能日益成为提升游戏体验的关键组成部分。本系列文章将为读者提供对Mirror网络框架的深入了解,涵盖从基础到高级的多个主题。Mirror是一个用于Unity的开源网络框架,专为多人游戏开发设计…

Github 2025-02-12 C开源项目日报 Top7

根据Github Trendings的统计,今日(2025-02-12统计)共有7个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目7Python项目2OpenSSL - 强大的开源加密工具包 创建周期:4012 天开发语言:C协议类型:Apache License 2.0Star数量:23449 个Fork数量:10…

DeepSeek模型架构及优化内容

DeepSeek v1版本 模型结构 DeepSeek LLM基本上遵循LLaMA的设计&#xff1a; 采⽤Pre-Norm结构&#xff0c;并使⽤RMSNorm函数. 利⽤SwiGLU作为Feed-Forward Network&#xff08;FFN&#xff09;的激活函数&#xff0c;中间层维度为8/3. 去除绝对位置编码&#xff0c;采⽤了…

【SpringBoot3.x+】slf4j-log4j12依赖引入打印日志报错的两种解决方法

最开始引入了1.7.5版本的slf4j-log4j依赖包&#xff0c;但是控制台不报错也不显示日志 在https://mvnrepository.com/找到最新的2.0.16版本之后出现报错&#xff1a; 进入提示的slf4j网站中可以找到从2.0.0版本开始&#xff0c;slf4j-log4j已经被slf4j-reload4j取代&#xff1…

web渗透测试之反弹shell SSRF结合redis结合伪协议 redis 未授权访问漏洞

目录 未授权访问漏洞利用:redis 反弹shell 漏洞原因就是&#xff1a; 反弹shell利用方式 反弹shell指的是什么 : 反弹shell的前提条件 步骤: redis未授权访问的三种利用手段反弹shell 利用定时任务反弹shell 攻击主机下设置 写入 webshell 步骤 利用公钥认证写入ro…

关于uniapp使用pinia持久化配置兼容问题

import { defineStore } from pinia; import { ref } from vue; // 定义 Store export const useMembersStore defineStore(members, () > {// 状态const memberInfo ref({})// actionsconst saveMemberInfo (info: any) > {memberInfo.value info}const clearMember…

开源堡垒机 JumpServer 社区版实战教程:基于 Ubuntu 22.04 离线安装 JumpServer 社区版 v4.4.1

文章目录 开源堡垒机 JumpServer 社区版实战教程&#xff1a;基于 Ubuntu 22.04 离线安装 JumpServer 社区版 v4.4.1一、环境要求1.1 操作系统1.1.1 Ubuntu1.1.2 CentOS 1.2 数据库1.2.1 JumpServer 需要使用的数据库1.2.2 创建数据库 SQL 参考1.2.2.1 PostgreSQL1.2.2.2 MySQL…