vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)
更新时间：2022年12月02日 15:21:30 作者：国服第二切图仔
这篇文章主要介绍了vue3中如何使用ref和reactive定义和修改响应式数据,这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容，需要的朋友可以参考下
需求：vue3中setup组合式api中如何定义响应式数据并且修改赋值呢？
1、字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等
<script setup>
import { ref } from 'vue'
// “ref”是用来存储值的响应式数据源。
// 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中，
const message = ref('Hello World!')
// 但是在这个示例中更改这个值的时候，就可以实现数据和页面响应式绑定了。
function changeMsg(data){
//message=data 这种是不行的，无法实现双向绑定
message.value=data
}
</script>
<template>
<h1>{{ message }}</h1>
<button @click="changeMsg('数据修改')">Reverse Message</button>
</template>2、数组/对象：引入 reactive 用来定义对象数据包括数组和对象
vue3使用proxy，对于对象和数组都不能直接整个赋值
<script setup>
import { reactive} from 'vue'
const arr = reactive([]);
const arr2=reactive({arr:[]});
const load = () => {
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
//方法1 失败，直接赋值丢失了响应性
arr = res;
// 方法2 这样也是失败
arr.concat(res);
// 方法3 成功 插入数据，修改数据属性，但是很麻烦
res.forEach(e => {
arr.push(e);
});
// 方法4 成功
arr.value =res
//方法5 成功
arr2.arr = res
};
</script>
<template>
<h1>Demo</h1>
</template>这里就是vue3中setup组合式api中如何定义响应式数据并且修改赋值全部内容了
到此这篇关于vue3中如何使用ref和reactive定义和修改响应式数据的文章就介绍到这了,更多相关vue3响应式数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了vue.js 开发环境搭建最简单攻略，这里整理了详细的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了vue.js实现三级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本文主要介绍了QT和vue交互的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue使用axios访问本地json文件404问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家介绍了Vue首屏时间指标采集最佳方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
vue路由事件beforeRouteLeave及组件内定时器的清除方法
今天小编就为大家分享一篇vue路由事件beforeRouteLeave及组件内定时器的清除方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了一起写一个即插即用的Vue Loading插件实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue报错Cannot read properties of undefined (...)类型的解决办法
这篇文章主要给大家介绍了关于vue报错Cannot read properties of undefined (...)类型的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了解决vue项目打包上服务器显示404错误,本地没出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
文章介绍了在网页中使用Vue.js的四种方式：基本方式、脚手架方式（Vue2.0）、使用WebStorm集成环境创建vue-cli项目（Vue3.0）以及Vue项目的目录结构,每种方式都有详细的步骤和示例,帮助读者快速上手Vue.js开发2024-11-11
最新评论