Vue3中ref和reactive的用法和区别

目录

两者的区别：

原理角度对比：

使⽤角度对⽐：

用法

实例：

实例：

---

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包裹的数据直接就是响应式数据。

实例：

    
    
    
    
    



    

        
{{name1}}
        
品牌：{{car.name}}
        
价格：{{car.price}}
    


    

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

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

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

实例：

    
    
    
    
    



    

        
品牌：{{car.brand}}

            价格：{{car.price}}

            年份：{{car.year}}

            所有者：{{car.owner}}
        
        修改汽车
        
    
    

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