Vue中ref与reactive的区别

ref响应式变量

ref 函数传入一个值作为参数,返回基于该参数的响应式ref对象

ref 接受参数,并将其包裹在一个带有 value property 的对象中返回,然后可以使用该 property 访问或更改响应式变量的值

将值封装在一个对象 中,看似没有必要,但为了保持 JavaScript 中不同数据类型的行为统一,这是必须的。这是因为在 JavaScript 中,Number或 String等基本类型是通过值传递的,而不是通过引用传递的,在任何值周围都有一个封装对象,这样我们就可以在整个应用中安全地传递它,而不必担心在某个地方失去它的响应性。

javascript 复制代码
let { createApp, ref } = Vue;
        createApp({
            setup() {
                const count = ref(0); //声明
                const event = () => { //修改事件
                    count.value++;
                };
                return { count, event };
            }
        }).mount('#app')

reactive

javascript 复制代码
let { createApp, reactive } = Vue;
        createApp({
            setup() {
                const count = reactive({
                    a: 0
                }); //声明
                const event = () => { //修改事件
                    count.a++;
                };
                return { count, event };
            }
        }).mount('#app')

区别

ref主要用于基本类型的响应,比如String Number boolean,想要修改需要使用.value先获取value值进行修改

reactive主要用于声明引用类型,修改时对应修改即可

但是,在模板区域中使用的时候,ref因为Componsition API的封装,直接使用就行,不用加.value,但在setup函数中使用的时候必须加

注意!使用这两个的时候一定要先引入,再return出去

相关推荐
brzhang1 小时前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang1 小时前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
爱看书的小沐2 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
程序员王天2 小时前
【开发AGIC】Vue3+NestJS+DeepSeek AI作业批改系统(已开源)
vue.js·ai编程·nestjs
井柏然2 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
昔冰_G3 小时前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
IT_陈寒3 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry3 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊4 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架