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函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇解决Vue在Tomcat8下部署页面不加载的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
当一个页面需要加载较多个组件时,并且组件自身又比较复杂,如果一次性加载,可能等待时间较长,体验不好,这个时候就需要延迟加载了,本文为大家介绍了Vue2实现组件延迟加载的示例代码,需要的可以参考下2024-01-01
Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧2023-08-08
这篇文章主要介绍了vue中定义的data为什么是函数,vue中已经帮我们控制台输出警告，并且不会让组件中的data合并到options中去，那么，很友好的处理了开发者的强行将data写成对象的可能性，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
emits是Vue3新增的选项,emits主要作用在子组件中,用于接收在父组件中绑定的方法,这篇文章主要给大家介绍了关于vue3.x中emits的基本用法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue中如何使用方法、计算属性或观察者的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小 的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下2020-03-03
vue中进入详情页记住滚动位置的方法(keep-alive)
今天小编就为大家分享一篇vue中进入详情页记住滚动位置的方法(keep-alive)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue源码解读之Component组件注册的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论