Vue3 之ref与reactive的区别

目录

• 一、ref与reactive的区别

---

在Vue 3中，reactive和ref都用于创建响应式的数据，但它们有一些关键的区别：

reactive用于创建响应式的对象，该对象的属性是深度响应式的。

ref用于创建响应式的基本类型数据，比如字符串、数字、布尔值等，它是reactive的简化版本，只提供了基本的响应式能力。

回到顶部

一、ref与reactive的区别

<template>
    <view class="">
        {{params}}  {{title}} {{arr}}
    </view>
</template>

<script setup>
    import {
        reactive,
        ref
    } from 'vue';
    
    //reactive 可用于复杂的参数
    const params = reactive({
        page: 1,
        keyword: '',
        isEnd: false
    });
    
    const arr = reactive([1, 2, 3]);
    
    const title = ref("ref与reactive的区别");
    const bool = ref(false);
    
    params.isEnd = true;
    
</script>

<style>
</style>

 

如果你感觉有收获，欢迎给我打赏 ———— 以激励我输出更多优质内容，联系QQ：2575404985