首页 > 其他分享 >Vue3 ref 和 reactive 的区别

Vue3 ref 和 reactive 的区别

时间:2024-09-02 17:25:03浏览次数:14  
标签:count 响应 value reactive Vue3 ref

Vue3 ref 和 reactive 的区别


文章目录

Vue3 ref和reactive的深度解析

一、ref和reactive是什么

在Vue3中,refreactive是两个非常重要的响应式API,它们都用于创建响应式数据。简单来说,ref用于处理基本数据类型,而reactive用于处理对象(包括数组)。

  • ref:返回一个可变的响应式对象,该对象包含一个名为value的属性,其基本数据类型值将被存储在这个属性中。
  • reactive:返回一个对象的响应式代理,该对象本身将被转换为响应式。

二、vue3中如何使用ref和reactive

1. 使用ref

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出 0

count.value++;
console.log(count.value); // 输出 1

2. 使用reactive

import { reactive } from 'vue';

const state = reactive({ count: 0 });
console.log(state.count); // 输出 0

state.count++;
console.log(state.count); // 输出 1

3. 在模板中使用

模板中不需要.value来访问ref的值,Vue会自动处理。

<template>
  <div>{{ count }}</div>
  <div>{{ state.count }}</div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ count: 1 });
    return { count, state };
  }
};
</script>

4. 解构ref

当从setup函数中返回响应式数据时,如果直接使用解构,那么会失去响应性。可以使用toRefs来解决这个问题。

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    return { ...toRefs(state) };
  }
};

5. reactive与ref的互转

const count = ref(0);
const reactiveCount = reactive({ count });

console.log(reactiveCount.count); // 输出 ref对象
console.log(reactiveCount.count.value); // 输出 0

const state = reactive({ count: 0 });
const refCount = toRef(state, 'count');

console.log(refCount.value); // 输出 0

三、ref和reactive包含哪些属性或方法API

1. ref的属性

  • .value:访问或更改ref的响应式值。

2. reactive的方法

  • reactive():创建响应式对象。
  • isReactive():检查对象是否由reactive创建。
  • isReadonly():检查对象是否由readonly创建。
  • isProxy():检查对象是否是由reactivereadonly方法创建的代理。

四、扩展与高级技巧

1. 使用ref处理数组和对象

虽然ref主要用于基本数据类型,但也可以用来处理数组和对象。

const arr = ref([]);
arr.value.push(1); // 响应式更新

const obj = ref({});
obj.value.key = 'value'; // 响应式更新

2. reactive与Vue2的响应式原理对比

Vue2使用Object.defineProperty来实现响应式,而Vue3使用Proxyreactive是基于Proxy实现的,可以监听对象属性的添加和删除。

3. 响应式判断API

Vue3提供了一系列API来判断对象是否为响应式或只读。

import { isReactive, isReadonly, isProxy } from 'vue';

console.log(isReactive(reactive({}))); // true
console.log(isReadonly(readonly({}))); // true
console.log(isProxy(reactive({}))); // true

4. 使用toRaw和markRaw

  • toRaw:返回由reactivereadonly创建的响应式对象的原始对象。
  • markRaw:标记一个对象,使其永远不会转换为响应式对象。
import { reactive, toRaw, markRaw } from 'vue';

const state = reactive({ count: 0 });
const raw = toRaw(state);
console.log(raw); // 输出原始对象

const nonReactive = markRaw({ count: 0 });
console.log(isReactive(nonReactive)); // false

5. 自定义ref

可以通过继承RefImpl类来自定义ref。

import { ref, Ref, customRef } from 'vue';

function useCustomRef(initialValue: number): Ref<number> {
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return initialValue;
      },
      set(value) {
        initialValue = value;
        trigger();
      }
    };
  });
}

const custom = useCustomRef(0);
console.log(custom.value); // 输出 0
custom.value++;
console.log(custom.value); // 输出 1

五、优点与缺点

优点

  1. refreactive都是Vue3的响应式API,使得状态管理变得简单和高效。
  2. ref使得基本数据类型的响应式处理变得简单。
  3. reactive可以处理对象和数组,且可以监听属性的添加和删除。

缺点

  1. ref需要通过.value来访问和修改值,这在某些情况下可能会稍显繁琐。
  2. reactive在处理大型对象时可能会有性能问题,因为Proxy的性能开销相对较大。

六、对应“八股文”或面试常问问题

1. Vue3中ref和reactive的区别是什么?

答:ref用于处理基本数据类型,reactive用于处理对象和数组。ref需要通过.value来访问和修改值,而reactive则直接操作对象本身。

2. 如何在Vue3中使用ref和reactive?

答:可以通过导入refreactive函数来创建响应式数据。ref用于创建基本数据类型的响应式数据,reactive用于创建对象和数组的响应式数据。

3. Vue3中ref有哪些常用的属性和方法?

答:ref有一个常用的属性.value,用于访问和修改ref的响应式值。

4. Vue3中reactive有哪些常用的方法和API?

答:reactive常用的方法有reactive()isReactive()isReadonly()isProxy()

5. Vue3中ref和reactive的优缺点是什么?

答:优点包括使得状态管理变得简单和高效,可以处理基本数据类型和对象/数组。缺点包括ref需要通过.value来访问和修改值,reactive在处理大型对象时可能有性能问题。

七、总结与展望

Vue3的refreactive是两个非常重要的响应式API,它们使得状态管理在Vue3中变得简单和高效。ref适用于处理基本数据类型,而reactive适用于处理对象和数组。虽然它们有一些缺点,但总体来说,它们是Vue3中不可或缺的一部分。随着Vue3的不断发展,我们可以期待这些API在未来会有更多的优化和改进。

看到这里的小伙伴,欢迎点赞、评论,收藏!

如有前端相关疑问,博主会在第一时间解答,也同样欢迎添加博主好友,共同进步!!!

标签:count,响应,value,reactive,Vue3,ref
From: https://blog.csdn.net/qq_34419312/article/details/141722088

相关文章

  • preload、prefetch
    preloadpreload是一种声明式的资源预加载技术,它告诉浏览器页面即将需要的资源,并请求浏览器提前加载这些资源。preload的主要特点包括:高优先级:preload加载的资源通常具有较高的优先级,浏览器会尽可能快地加载这些资源,但加载过程不会阻塞文档的解析或window的onload事件。指定资......
  • PBR-Book Ch8 Reflection Models
    PBR-BookCh8ReflectionModelsReflectionModels(pbr-book.org)球坐标系中,使用\((\theta,phi)\)\(\theta\)givendirectiontothe\(z\)axis\(\phi\)theangleformedwiththe\(x\)axisafterprojectionofdirectionontothe\(xy\)lane.......
  • zdppy+vue3+onlyoffice文档管理系统实战 20240901 上课笔记 基于验证码登录功能基本完
    遗留的问题1、点击切换验证码2、1分钟后自动切换验证码点击切换验证码实现步骤:1、点击事件2、调用验证码接口3、更新验证码的值点击事件给图片添加点击事件:<img:src="'data:image/png;base64,'+captchaImg"style="width:100%;height:50px;margin-top:10......
  • vue3中常见单位及响应式单位rpx
    1.常用单位1.1px此时画了一个盒子模型,宽度和高度都是200px此时效果就是这样的1.2vw现在更改成了40vw,看看效果是怎么样的vw也就是在整个页面中的占比量,40vw就是占整个页面的40%使用%这个也是同样的效果,都是在页面中的占比量最直观的区别就是切换页面大小,就可以......
  • CohereForAI更新企业级开源模型 c4ai-command-r-08-2024和c4ai-command-r-plus-08-202
    C4AICommandR08-2024是一个350亿参数高性能生成模型的研究版本。CommandR08-2024是一个大型语言模型,采用开放式权重,针对推理、总结和问题解答等各种用例进行了优化。CommandR08-2024具备多语言生成功能,曾在23种语言上进行过训练,并在10种语言上进行过评估......
  • Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区
    SPASPA(SinglePageApplication,单页面应用)是一种Web应用程序架构,其核心特点是在用户与应用程序交互时,不重新加载整个页面,而是通过异步加载页面的局部内容或使用JavaScript动态更新页面。以下是对SPA的详细解析,包括其优点和缺点:SPA的优点更好的用户体验:SPA无需重新加载......
  • 推荐一个开箱即用的中后台前端解决方案,基于vue3开发,私活神器(带源码)
     前言在现代软件开发中,中后台系统的开发往往面临诸多挑战,如技术选型、组件库的丰富性、开发效率等。现有的解-决方案可能存在技术栈陈旧、定制性差、study成-本高等问题。为了解决这些痛点,一款新的软件——vue-element-plus-admin,应运而生,提供了一个基于新技术栈的中后台前......
  • 记录vue3写项目遇到的奇奇怪怪怪的小问题(持续更新)
    <el-table:header-cell-style="{color:'#fff',background:'rgba(78,131,211,0.8)'}"//设置table表头样式></el-table>表头居中:cell-style="{text-align:center}"表行居中<el-......
  • Vue3中的自定义事件和状态提升案例
    Vue3中的自定义事件和状态提升案例在现代Web开发中,Vue.js作为一个轻量级且灵活的前端框架,越来越受到开发者的青睐。而Vue3引入的组合式API(setup语法糖)更是让状态管理和事件处理变得更加优雅。在这篇博客中,我们将探讨如何在Vue3中利用自定义事件和状态提升,实现组件间的有效......
  • 在Vue3中实现懒加载功能
    在Vue3中实现懒加载功能在现代前端开发中,懒加载是一种提高应用性能和用户体验的重要技术,尤其是在处理较大图片或长列表数据时。懒加载意味着仅在用户需要时才加载资源,这有助于减少初始加载时间和提升响应速度。本文将使用Vue3和其新推出的setup语法糖来实现懒加载......