Vue3中ref和reactive的用法和区别

最新推荐文章于 2025-02-27 14:44:07 发布

浮生若梦777

最新推荐文章于 2025-02-27 14:44:07 发布

阅读量720

点赞数 7

分类专栏：前端(Vue/Javascript) 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_58626489/article/details/135926066

版权

前端(Vue/Javascript) 专栏收录该内容

25 篇文章

订阅专栏

文章介绍了Vue3中ref和reactive的区别，ref用于定义基本类型数据，reactive用于对象和数组。两者通过数据劫持实现响应式，ref需要`.value`操作数据，而reactive则无需。实例展示了如何在Vue组件中使用这两种方式定义和更新响应式数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2中我们通常将响应式数据放在data中，再Vue3中提供了组合式API的写法，即数据和方法写在一起，便于维护。那么Vue3中如何定义响应式数据呢？这就需要使用ref和reactive。

两者的区别：

ref ⽤来定义：基本类型数据

reactive ⽤来定义：对象、或数组类型的数据

备注：ref也可以⽤来定义对象或数组类型数据，它内部会⾃动通过 reactive 转为代理对象

原理角度对比：

ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式的（数据劫持）

reactive 通过使⽤ Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。

使⽤角度对⽐：

ref 定义的数据：操作数据需要 .value,读取数据时模版中直接读取不需要 .value

reactive 定义的数据：操作数据与读取数据，均不需要 .value

注：ref定义的数据在操作数据需要 .value，容易忘记的小伙伴可以看主页的另一篇文章，关于ref的数据使用时自动.value的方法。

用法

ref定义响应式数据,可以是变量或对象

let name1 = ref('Vue3')

操作ref的数据需要.vulue

let name1 = ref('Vue3')
let car = reactive({
    name: '奔驰',
    price:120
})

function changename() {
    name1.value = 'Vue3.0'
}

reactive只能定义响应式的对象

let car = reactive({
                    name: '奔驰',
                    price:120
                })

将数据包裹起来就可以

由于本文中我使用的是一个单HTML文件引入vue做演示，所以需要使用return返回响应式数据和方法，vue文件的话中无需再使用return。由ref和reactive包裹的数据直接就是响应式数据。

实例：



<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{name1}}</p>
        <p>品牌：{{car.name}}</p>
        <p>价格：{{car.price}}</p>
    </div>


    <script>
        const { ref,reactive } = Vue
        const app = {
            setup() {
                let name1 = ref('Vue3')
                let car = reactive({
                    name: '奔驰',
                    price:120
                })
                return {
                    name1,
                    car
                }
            }
        }

        Vue.createApp(app).mount('#app')
    </script>

</body>

vue文件中编写的话，return去掉即可

reactive 重新分配一个新对象，会失去响应式(可以使用 Object.assign 去整体替换)

Object.assign(car,对象1,对象2,...)，对象1和对象2传入car中，最终显示最后传入的对象（对象为键值对）

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>品牌：{{car.brand}}<br>
            价格：{{car.price}}<br>
            年份：{{car.year}}<br>
            所有者：{{car.owner}}
        </p>
        <button @click="changeCar">修改汽车</button>
        <!-- <p>姓名：{{obj.name}}<br>
            年龄：{{obj.age}}<br>
            手机：{{obj.info.phone}}<br>
            地址：{{obj.info.address}}<br>
            手机2：{{obj.info.info.phone2}}<br>
            地址2：{{obj.info.info.address2}}<br>
        </p> -->
    </div>
    <script>
        const { ref, reactive } = Vue
        const app = Vue.createApp({
            setup() {
                let car = reactive({
                    brand: '奔驰',
                    price: '100',
                    year: 1964,
                    owner: 'John Doe'
                })
                // const obj = reactive({
                //     name: 'tom',
                //     age: 18,
                //     info: {
                //         phone: '123456789',
                //         address: 'beijing',
                //         info: {
                //             phone2: '123456',
                //             address2: 'shanghai',
                //         }
                //     }
                // })
                return {
                    car,
                    changeCar
                }

                function changeCar() {
                    // 下面两种写法无法修改
                    // reactive 重新分配一个新对象，会失去响应式(可以使用 Object.assign 去整体替换)
                    // car = {brand: '宝马', price: '120', year: 1980, owner: 'zhangsan'}
                    // car = reactive({brand: '宝马', price: '120', year: 1980, owner: 'zhangsan'})
                    // Object.assign(car, { brand: '宝马', price: '120', year: 1980, owner: 'zhangsan' },{ brand: '奥迪', price: '800', year: 1999, owner: 'lisi' })
                    Object.assign(car, { brand: '宝马', price: '120', year: 1980, owner: 'zhangsan' })
                    console.log(car)
                }
            }
        })

        app.mount('#app')
    </script>
</body>

</html>

注意：在单HTML中编写的话，数据和方法都要写在return中。