一、Vue3组合式基础[ref、reactive]

一、ref

解释：ref是Vue3通过ES6的Proxy实现的响应式数据，其与基本的js类型不同，其为响应式数据，值得注意的是，reactive可以算是ref的子集，ref一般用来处理js的基本数据类型如整型、字符型等等(也可以用来处理对象、数组等等)

1.赋值

解释：对于ref赋值和取值的时候的格式都是xxx.value，但是在vue的模版语法中，无需带上 .value

// 赋值(基本数据类型)
const name = ref()
name.value = 55
const name = ref()
name.value = '555666'
// 赋值(对象)
const name = ref()
name.value = {
  time: 55
}
console.log(name.value.time)
// 赋值(数组)
const name = ref()
name.value = [
  {
    time: 556
  }
]
console.log(name.value[0].time)

2.取值

解释：这里主要解释，取值操作时，变量的一些变化

1. 动态

   // 取值(将name里面的value赋值给b)
   const name = ref()
   name.value = [
     {
       time: 556
     }
   ]
   const b = { time: '' }
   b.time = name.value
   console.log(b)
   // 注意，此时的b已经不再完全是静态对象了，其刚刚被赋值的time对应是动态的Proxy
   

2. 静态
   解释：通过for of循环和ES6的解构进行处理，此场景一般用于需要动态数据当中间变量时

   const name = ref()
   name.value = [
     {
       time: 556
     }
   ]
   const b = { time: '' }
   b.time = name.value[0].time
   console.log(b)
   // b取值时，要直接取到最里面的值就不会导致动态
   
   
   // 例子：
   const dataRef = ref()
   // res.data是格式为[]的Proxy
   dataRef.value = res.data
   console.log(dataRef)
   const b = { list: [] }
   // b.list = dataRef.value
   console.log(b)
   for (const i of dataRef.value) {
     // 解构代码
     const { goodsId, goodsName } = i
     b.list.push({ goodsId, goodsName })
   }
   console.log(b)
   // b此时就是常量
   

二、reactive

解释：reactive的底层是通过Proxy实现的响应式数据，reactive的响应式是深层次的，reactive一般用来处理对象或者数组(基本数据类型是不允许的)

误区：看下面这些代码，如果在使用下面的代码进行操作(场景比如后端传来数据直接去赋值)，其就会导致响应式丢失

let userInfo = reactive([{ name: 'time' }])
console.log(userInfo) // Proxy对象
// 类型场景：直接后端数据进行赋值
userInfo = [{ name: 'luck' }]
console.log(userInfo) // [{ name: 'luck' }] 其为普通数组响应性随之丢失

1.赋值

// 赋值(对象)
const name = reactive({ content: '' })
name.content = '5'
console.log(name)
console.log(name.value.time)
// 赋值(数组)
const name = reactive({ list: [] })
name.list = [5, 6, 7]
console.log(name)

2.取值

解释：这里就不再说动态的例子，其和ref里面讲的大同小异，主要演示一下静态取值，此场景一般用于需要动态数据当中间变量时

// 类型场景：后端发来的数据
const book = [
  { id: 0, type: 'm' },
  { id: 1, type: 'c' }
]
// 前端静态接收(此场景一般用于需要动态数据当中间变量时)
for (const i of book) {
  const { id, type } = i
  console.log(id, type)
}