vue中ref与reactive的区别

1. ref：定义基本类型和对象； reactive本身就是一个对象，可以定义复杂类型，比如数组和对象；ref 会返回一个基于该值的响应式对象Ref, 该对象中的值一旦发生改变，就会被跟踪到；而 reactive本身就是响应式的对象；

2. 使用方式
ref定义的变量需要通过.value访问；而reactive不需要.value，可以直接访问

// 定义ref
const obj = ref({
    com: "",
    com2: 1
})
// ref更改值
obj.value.com1 = "我爱学习";
obj.value.com2 = 100;

// 定义reactive
let data = reactive({
  searchForm: {
    companyName: "",
    companyCode: "",
  },

// reactive更改值
data.searchForm.companyName = "测试数据"

3. 监听

reactive是通过Proxy代理实现响应式，再通过Reflect操作源对象中的数据，所以可以监听添加删除的属性，以及数组的添加或删除，所以性能比较好一些，因为不需要对每一个数据进行深度监听。
ref， 系统会把传入的值ref(xxx)，转化为reactive({value: xx}), 实际上可以理解成是reactive的二次封装