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

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

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

先看ref使用的位置

<script >
import {ref} from 'vue'
export default {name: 'App',
		setup()
    {
			//数据
			let name = ref('张三')
			let age = ref(18)
			

			//方法
			function changeInfo(){
				// name = '李四'
				// age = 48
        console.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.kler.cn/a/540383.html

相关文章:

  • 第三节 docker基础之---Commit+Dockerfile制作
  • 2025.2.9 每日学习记录2:技术报告写了一半+一点点读后感
  • 在Java中操作Redis
  • 循环神经网络学习01——transformer:输入部分-嵌入层位置编码
  • 502 Bad Gateway 错误详解:从表现推测原因,逐步排查直至解决
  • 用Kibana实现Elasticsearch索引的增删改查:实战指南
  • 零阶保持器(ZOH)变换和Tustin离散化变换以及可视化
  • 大语言模型RAG,transformer
  • 微信小程序分包异步化
  • 【时时三省】(C语言基础)基础习题1
  • Open Liberty使用指南及开发示例(二)
  • C++基础知识学习记录—补充
  • 2.10作业
  • 说一下 Tcp 粘包是怎么产生的?
  • ElasticSearch进阶
  • 服务器使用宝塔面板Docker应用快速部署 DeepSeek-R1模型,实现Open WebUI访问使用
  • Godot开发框架探索#2
  • 线程状态示意图
  • ElasticSearch 分页技术详解:实现方式与最佳实践
  • python之keyring库:安全密码管理库,不同平台service_name、username的获取
  • DeepSeek从入门分析总结
  • 【Golang学习之旅】gRPC 与 REST API 的对比及应用
  • kafka topic是什么?partition是什么? broker是什么?
  • 如何使用DeepSeek帮助自己的工作?
  • Vue.js 状态管理库Pinia
  • 关于SoC产品介绍:ICNM8501