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

ops/2025/2/14 3:14:41/

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/ops/158201.html

相关文章

MIT开源7B推理模型Satori:用行动思维链进行强化学习,增强自回归搜索

自OpenAI的o1发布以来&#xff0c;研究社区为提升开源LLM的高级推理能力做出了诸多努力&#xff0c;包括使用强大的教师模型进行蒸馏、蒙特卡洛树搜索&#xff08;MCTS&#xff09;以及基于奖励模型的引导搜索等方法。 本研究旨在探索一个新的研究方向&#xff1a;使LLM具备自回…

第七节 文件与流

基本的输入输出&#xff08;iostream&#xff09; C标准库提供了一组丰富的输入/输出功能&#xff0c;C的I/O发生在流中&#xff0c;流是字节序列。如果字节流是从设备&#xff08;键盘、磁盘驱动器、网络连接等&#xff09;流向内存&#xff0c;叫做输入操作。如果字节流是从…

Tauri Windows入门开发避坑指南

一、前置条件 在Windows上开发Tauri应用&#xff0c;需要先配置开发环境&#xff1a; windows上需要满足以下三个要求&#xff1a; 1.Microsoft C 构建工具 2.安装WebView2 3.下载并安装Rust 这些软件在本文附件中可以下载&#xff0c;如何安装请查看官方文档&#xff1a;htt…

西安电子科技大学考研成绩2月24号即可查询,成绩查询入口:

2025研考初试成绩查询倒计时&#xff01; 提醒&#xff1a;初试成绩查询时间是看目标院校所属省份及报考院校相关通知&#xff0c;如某广东考生报考北京招生单位&#xff0c;查成绩时间是看北京教育考试院及报考院校相关通知。 2月24日起&#xff0c;查分&#xff01; 江西&a…

PyCharm结合DeepSeek-R1

PyCharm结合DeepSeek-R1&#xff0c;打造专属 AI 编程助手 在程序员的日常工作中&#xff0c;提高编程效率、快速解决代码问题是重中之重。今天给大家分享一个强强联合的组合 ——PyCharm 插件 Continue 与 DeepSeek-R1&#xff0c;它们能帮你打造出强大的个人 AI 编程助手。 …

React进行路由跳转的方法汇总

在 React 中进行路由跳转有多种方法&#xff0c;具体取决于你使用的路由库和版本。以下是常见的路由跳转方法汇总&#xff0c;主要基于 react-router-dom 库。 1. 使用 useNavigate 钩子&#xff08;适用于 react-router-dom v6&#xff09; useNavigate 是 react-router-dom…

【力扣 - 简单题】88. 合并两个有序数组

题目&#xff1a;88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 解题&#xff1a; class Solution { public:void merge(vector<int>& nums1, int m, vector<int>& nums2, int n) {for (int i m; i < n m; i ){nums1[i] nums2[i -…

Cursor无法安装插件解决方法

1.在Cursor中按快捷键F1&#xff0c;调出控制台查看报错信息 2.发现域名连接失败 原商店域名为:https://marketplace.cursorapi.com 3.更改商店源&#xff0c;找到product.json文件 "extensionsGallery": {"serviceUrl": "https://marketplace.visu…