目录
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中。