目录
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定义响应式数据,可以是变量或对象
javascript
let name1 = ref('Vue3')操作ref的数据需要.vulue
javascript
let name1 = ref('Vue3')
let car = reactive({
name: '奔驰',
price:120
})
function changename() {
name1.value = 'Vue3.0'
}reactive只能定义响应式的对象
javascript
let car = reactive({
name: '奔驰',
price:120
})将数据包裹起来就可以
由于本文中我使用的是一个单HTML文件引入vue做演示，所以需要使用return返回响应式数据和方法，vue文件的话中无需再使用return。由ref和reactive包裹的数据直接就是响应式数据。
实例：
html
<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中，最终显示最后传入的对象（对象为键值对）
实例：
html
<!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中。