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出去

相关推荐
纯爱掌门人7 小时前
鸿蒙端云一体化云存储实战:手把手教你玩转文件上传下载
前端·harmonyos
非凡ghost7 小时前
图吧工具箱-电脑硬件圈的“瑞士军刀”
前端·javascript·后端
非凡ghost7 小时前
Xrecode3(多功能音频转换工具)
前端·javascript·后端
橙某人7 小时前
飞书多维表格插件:进一步封装,提升开发效率!🚀
前端·javascript
他们叫我秃子7 小时前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
非凡ghost7 小时前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端
用户84298142418107 小时前
10个JavaScript编程实用技巧
javascript
扎瓦斯柯瑞迫7 小时前
cursor: 10分钟魔改环境、优雅获取Token
前端·javascript·后端
王六岁7 小时前
🐍 前端开发 0 基础学 Python 入门指南:条件语句篇
前端·python
wuxingxi7 小时前
现代化企业级H5模板:Vite + Vue 3 + TypeScript 开箱即用
vue.js