reactive和ref的特性和区别

reactive和ref返回的都是一个原始对象的 Proxy，它和原始对象是不相等的

一、定义数据方面：

reactive：仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效

ref：允许我们创建可以使用任何值类型的响应式ref

二、使用方面：

// reactive的使用
import { reactive } from 'vue';

let msg = reactive({ a: 0 })
let msg1 = reactive([{ a: 0 }])



// ref的使用
import { ref } from 'vue';

let msg = ref({ a: 0 })
let msg1 = ref([{ a: 0 }])
let msg2 = ref(0)
let msg3 = ref(true)
let msg4 = ref('aaa')
let msg5 = ref(null)

三、修改值的注意点

import { reactive, ref } from 'vue';

// ref : ref修改值需要通过 .value 来修改，但是通过 {{}} 读取值的时候是不需要加.value的
let msg = ref(0)
msg.value = 1 
console.log(msg)



// reactive ：reactive修改值不需要通过 .value 可直接修改
let play = reactive({ a: 0 })
play.a = 1
console.log(play)

四、reactive响应注意点

很多人在获取数据以后会直接赋值，这时候会发现reactive失去响应，这是为什么呢，看完下面你就了解

import { reactive, ref } from 'vue';

// 这个时候你就会发现当前数据不会具有响应：原因是因为当前的 proxy对象 已经被替换为 原始对象
let play = reactive({ a: 0 })
play = { a: 1 }
console.log(play);  //{a: 1}


// 解决1 ：在重新替换的时候给新的值也加上 reactive()
let play = reactive({ a: 0 })
play = reactive({ a: 1 })
console.log(play);  //Proxy {a: 1}


// 解决2 ：使用 ref 代替 reactive 
// 原因：ref 的 .value 属性也是响应式的。同时，当值为对象类型时，会用 reactive() 自动转换它的 .value
let play = ref({ a: 0 })
play.value = { a: 1 }
console.log(play);




// 以下的解构也不会具有响应式

let n = play.a
n++  //不影响原始的 play

let { a } = play
a++  // 不会影响原始的 play