vue3中reactive和ref函数及对比分析
更新时间：2024年01月19日 10:16:33 作者：香香爱编程
这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
reactive和ref函数
1. reactive
接受对象类型数据的参数传入并返回一个响应式的对象
<script setup>
// 导入
import { reactive } from 'vue'
// 执行函数 传入参数 变量接收
const state = reactive({
msg:'this is msg'
})
const setSate = ()=>{
// 修改数据更新视图
state.msg = 'this is new msg'//不需要.value
}
</script>
<template>
{{ state.msg }}
<button @click="setState">change msg</button>
</template>2. ref
接收简单类型或者对象类型的数据传入并返回一个响应式的对象
<script setup>
// 导入
import { ref } from 'vue'
// 执行函数 传入参数 变量接收
const count = ref(0)
const setCount = ()=>{
// 修改数据更新视图必须加上.value
count.value++
}
</script>
<template>
<button @click="setCount">{{count}}</button>
</template>注意：
- ref函数创建响应式数据，返回值是一个对象
- 模版中使用ref数据,省略.value，js代码中不能省略(特殊：js中watch监听可以省)
3、reactive 对比 ref
- 都是用来生成响应式数据
- 不同点：
- reactive不能处理简单类型的数据，只支持引用数据类型,ref支持基本和引用数据类型
- ref通过.value获取数据，reactive不需要.value
- ref创建响应式引用数据类型低层依赖reactive
到此这篇关于vue3中reactive和ref函数及对比的文章就介绍到这了,更多相关vue3 reactive和ref函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
element-ui 远程搜索组件el-select在项目中组件化的实现代码
这篇文章主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)
这篇文章主要介绍了Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）,本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置，scss的安装，目录结构的创建和解释，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了VUE 3D轮播图封装实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
Vue + element 实现多选框组并保存已选id集合的示例代码
这篇文章主要介绍了Vue + element 实现多选框组并保存已选id集合,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识，感兴趣的朋友一起看看吧2017-07-07
本文主要介绍了el-table表头添加勾选框的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为，这里整理了详细的代码,有需要的小伙伴可以参考下。2017-03-03
这篇文章主要介绍了vue-preview动态获取图片宽高并增加旋转功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了在Vue3中,ref用于创建简单数据的响应式包装,通过.value访问和修改；reactive用于创建复杂对象的响应式对象,可以直接访问和修改属性,两者各有适用场景,ref更适合单个值,reactive更适合复杂对象,本文介绍vue3 ref和reactive区别,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要为大家详细介绍了element ui表格实现下拉筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论