Vue3全家桶升级指南二ref、toRef、toRefs的区别

ref

• 接受一个原始值（string、Number、Boolean、Symbol），返回一个具有响应式的对象，具有value属性。通常用来定义简单数据类型。
• 也可以接受对象，源码会自动判断传入的值，如果是对象会自动变成reactive包裹
  特性：源数据的值不会被更改，视图也会实时更改

let name=ref("张三")
name.value="李四"
console.log(name.value)//输出"李四"

reactive

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据，通常用来定义响应式的对象数据。

• 增删改查和深度的增删改查都会触发响应式从而改变视图。
• 单独把对象中的某个值拿出来赋值，响应式中断，不会改变视图

特性：源数据的值也会被更改，视图也会实时更改

let people=reactive({
  name:'张三',
  age:'22'
})
let people2=toRef(people,"name")
let people3=people.name
people.name="李四"

console.log(people.name)//输出"李四"
console.log(people2.value)//输出"李四"
console.log(people3)//输出"张三"，响应式中断

toRef

toRef是用来给抽离响应式对象（被reactive包裹的对象）中的某一个属性的，并且把这个属性包裹成ref对象，使其和原对象产生链接

• 解决reactive中单独赋值，响应式中断的问题
  特性：源数据的值也会被更改，视图也会实时更改

let people=reactive({
  name:'张三',
  age:'22'
})
let people2=toRef(people,"name")
people.name="李四"
console.log(people2.value)//输出"李四"

toRefs

toRef是批量版的toRef，转换响应式对象中所有属性为单独响应式数据

let people=reactive({
  name:'张三',
  age:"22"
})
let people2=toRefs(people)
console.log(people2.name.value)