ref和reactive的区别 Vue3

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})
//不同点1
function logCar(){console.log(car1.value.price)console.log(car2.price)
}
//不同点2
function changeCar(){car1.value = {brand:'奔驰',price:200}Object.assign(car2,{brand:'奥迪',price:300})
}

什么时候用ref，什么时候用reactive

• 既然都可以定义对象类型的响应式数据，如何选择呢？
  • 基本类型，必须用ref
  • 定义的对象，层级结构比较深，推荐reactive。否则需要多次写 .value