目录

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
树上有只程序猿21 分钟前
如果单表数据量大,只能考虑分库分表吗?
前端
程序员易晶22 分钟前
vue2添加背景水印-手动实现(无组件模式)
javascript·vue.js·elementui
蘑菇头爱平底锅29 分钟前
数字孪生-DTS-孪创城市-前端用代码实现行政区划分
前端·数据可视化
安迪小宝32 分钟前
python基础语法13-装饰器
开发语言·前端·python
Moon_su1 小时前
vue中路由回退数据缓存的最佳实践
vue.js
鸿蒙场景化示例代码技术工程师1 小时前
实现文件List拖动鸿蒙示例代码
前端
Rachel_wang1 小时前
React 使用 i18next 实现国际语言切换翻译
前端
小白探索世界欧耶!~1 小时前
【踩坑】GitHub Actions 运行的 Linux 环境中,文件名是大小写敏感的
linux·运维·服务器·前端·vue.js·笔记·github
Simon—欧阳1 小时前
C#异步方法返回Task<T>的同步调用
开发语言·前端·javascript
天生我材必有用_吴用1 小时前
vue3实战三、Axios封装结合mock数据,vite跨域及环境变量配置 入口
前端