Vue3 中ref和reactive的区别

---

一、ref和reactive定义

• ref用来定义：基本数据类型，对象，数组数据类型
• reactive定义：对象数据类型 (他不能定义基本数据类型)

二、ref和reactive区别

• ref创建的变量必须使用.value
• reactive定义的数据如果被重新赋值一个新对象，会失去响应式（但可以使用ES6新增语法Object.assign去整体替换）
• 注意：使用ref定义的对象数据类型，如果重新赋值新的对象，通过以下方式：

1.这样赋值不会丢失响应式 ---ref
const obj = ref({
	name:'张三',
	age:18,
	address:'湖北'
})
obj.value = {
   name:'李四',
	age:19,
	address:'湖南'
}


2.这样赋值响应式数据丢失 ---reactive
const obj = reactive({
	name:'张三',
	age:18,
	address:'湖北'
})
obj = {
   name:'李四',
	age:19,
	address:'湖南'
}

// 改善reactive赋值
const obj = reactive({
	name:'张三',
	age:18,
	address:'湖北'
})

Object.assign(obj,{name:'李四',age:18,address:'湖南'})   // 响应式生效

三、到底项目中使用ref还是reactive？

本人习惯使用ref，因为ref可以一把梭，既可以定义基本数据类型也可以对象数据类型 （可以根据项目自行决定）

1. 定义基本数据类型：必须使用ref
2. 需要响应式对象，可以使用ref或者reactive都可以
3. 如果响应式对象类型的层级比较深，比如表单数据这样的，就可以使用reactive。

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了ref和reactive的区别。