Vue3中ref和reactive的区别
ref
- 可以定义基本数据类型，也可定义对象类型的响应式数据
reactive
ref和reactive定义对象类型的响应式数据有什么不同
- 不同点1
- ref定义的响应式数据，取值时需要先 .value
- 不同点2
- 替换整个对象时，方法不一样
- ref： car1.value = {brand:‘奔驰’,price:200}
- reactive：用Object.assign()方法，替换对象中所有属性的值
let car1 = ref({brand:'奔驰',price:100})
let car2 = reactive({brand:'奥迪',price:100})
function logCar(){
console.log(car1.value.price)
console.log(car2.price)
}
function changeCar(){
car1.value = {brand:'奔驰',price:200}
Object.assign(car2,{brand:'奥迪',price:300})
}
什么时候用ref，什么时候用reactive
- 既然都可以定义对象类型的响应式数据，如何选择呢？
- 基本类型，必须用ref
- 定义的对象，层级结构比较深，推荐reactive。否则需要多次写 .value
