【Vue3 入门到实战】3. ref 和 reactive区别和适用场景

目录

​编辑

[1. ref 部分](#1. ref 部分)

[1.1 ref定义基本数据类型](#1.1 ref定义基本数据类型)

[1.2 ref 定义引用数据类型](#1.2 ref 定义引用数据类型)

[2. reactive 函数](#2. reactive 函数)

[3. ref 和 reactive 对比](#3. ref 和 reactive 对比)

[3.1 原理](#3.1 原理)

[3.2 区别](#3.2 区别)

[3.3 使用原则](#3.3 使用原则)


在 Vue 3 中 ref 和 reactive 是用于创建响应式数据的两个核心函数。它们都属于 Composition API 的一部分,但适用于不同的场景和类型的数据。理解两者之间的区别和适用场景对于高效开发 Vue 应用至关重要。

1. ref 部分

1.1 ref定义基本数据类型

**作用:**定义响应式变量。

**语法:**let xxx = ref(初始值)。

**返回值:**一个RefImpl 的实例对象,简称 ref 对象,ref 的对象的 value属性是响应式的。

**注意点:**如果使用ref定义响应式数据,JS中操作数据需要 xxx.value,但模板中不需要。

代码如下所示

<template>
    <div class="person">
        <h3>我是Person组件</h3>
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>
        <button v-on:click="changeName">修改名字</button>
        <button v-on:click="changeAge">修改年龄</button>
        <button v-on:click="showTel">查看联系方式</button>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let name = ref('张三')
let age = ref(18)
let tel = ref('123456')

        function changeName() {
            name.value = '李四'
            console.log(name)
        }
        function changeAge() {
            age.value += 1;
            console.log(age)
        }
        function showTel() {
            alert(tel)
            console.log(tel)
        }
</script>

<style>
    .person {
        background: blue;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>

控制台打印可以看到 ref 定义的响应式数据返回的是一个ref对象。

1.2 ref 定义引用数据类型

其实 ref 接收的数据可以是:基本类型、引用类型。

若 ref 接收的是引用类型,内部其实也是调用了 reactive 函数。

代码如下

<template>
    <div class="person">
        <h3>我是Person组件</h3>
        <h2>姓名:{{ info.name }}</h2>
        <h2>年龄:{{ info.age }}</h2>
        <button v-on:click="changeName">修改名字</button>
        <button v-on:click="changeAge">修改年龄</button>
        <button v-on:click="showTel">查看联系方式</button>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'
    let info = ref(
        {name: '张三', age: 18, tel: '12345678901'}
    )
    console.log(info)
    function changeName() {
        info.value.name = '李四'
        console.log(info.value.name)
    }
    function changeAge() {
        info.value.age += 1;
        console.log(info.value.age)
    }
    function showTel() {
        alert(info.value.tel)
        console.log(info.value.tel)
    }
</script>

<style>
.person {
    background: blue;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>

如图所示,ref 定义引用数据类型,在外层是一个RedImpl 实例对象,而在内部是一个被proxy代理的对象。这也印证了" 若 ref 接收的是引用类型,内部其实也是调用了 reactive 函数 "。

2. reactive 函数

**作用:**定义一个响应式对象,基本类型不要用它,要用 ref,否则报错。

**语法:**let 响应式对象= reactive(源对象)。

返回值: 一个 Proxy 的实例对象,简称:响应式对象。

注意点: reactive 定义的响应式数据是"深层次"的。

代码如下

<template>
    <div class="person">
        <h3>我是Person组件</h3>
        <h2>姓名:{{ info.name }}</h2>
        <h2>年龄:{{ info.age }}</h2>
        <button v-on:click="changeName">修改名字</button>
        <button v-on:click="changeAge">修改年龄</button>
        <button v-on:click="showTel">查看联系方式</button>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'
    let info = reactive(
        {name: '张三', age: 18, tel: '12345678901'}
    )
    console.log(info)

    function changeName() {
        info.name = '李四'
        console.log(info.name)
    }
    function changeAge() {
        info.age += 1;
        console.log(info.age)
    }
    function showTel() {
        alert(info.tel)
        console.log(info.tel)
    }
</script>

<style>
.person {
    background: blue;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>

控制台打印 reactive 定义的引用对象info

如图所示, 打印的是一个Proxy实例对象。

3. ref 和 reactive 对比

3.1 原理

(1) ref的本质就是实例化了RefImpl类得到了一个对象,访问这个对象的value属性时触发track,设置这个对象的value属性时触发trigger

(2) reactive响应式的原理是:创建了一个被Proxy代理的对象,Proxy里面代理了各种操作,在读取的时候触发track函数,在写入的时候触发trigger函数。

要想更深入了解底层原理,可参考下面这篇文章 ↓ ↓ ↓

vue源码简析-vue响应式原理(ref和reactive的原理) - 知乎

3.2 区别

  1. ref 可以定义基本数据类型、引用数据类型,而 reactive 只能定义引用数据类型。

  2. ref 创建的变量必须用 .value(可以使用volar插件自动添加value),reactive不需要。

  3. 定义引用类型时,reactive 重新再分配一个对象,会失去响应式,可以使用 Object.assign整体替换。而 ref 重新分配对象时不会失去响应式。

3.3 使用原则

(1). 若需要一个基本类型的响应式数据,必须使用 ref。

(2). 若需要一个响应式对象,层级不深,ref`、reactive都可以。

(3). 若需要一个响应式对象,且层级较深,推荐使用 reactive。

相关推荐
无责任此方_修行中1 小时前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
Σίσυφος19001 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端1 小时前
0基础学前端-----CSS DAY13
前端·css
dorabighead2 小时前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
css趣多多3 小时前
案例自定义tabBar
前端
姑苏洛言4 小时前
DeepSeek写微信转盘小程序需求文档,这不比产品经理强?
前端
林的快手4 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳4 小时前
ECharts极简入门
前端·信息可视化·echarts
bug总结4 小时前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript
网络安全-老纪5 小时前
网络安全-js安全知识点与XSS常用payloads
javascript·安全·web安全