vue3之实现响应式数据ref和reactive

用途

ref、reactive都是vue3提供实现响应式数据的方法

ref()

接受一个内部值，返回一个响应式的、可更改的ref对象，此对象只有一个指向其内部的属性.value

ref可以说是简化版的reactive，与reactive的区别则是

ref是对某一个数据类型的单独双向绑定

使用ref在setup读取的时候需要使用.value的形式template中则不需要.调用

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

reactive()

返回一个对象的响应式代理。

参数必须是对象(json/arr)

本质是转成proxy对象

响应式转换是深层的，它会影响到所有嵌套的属性，一个响应式对象也将深层地解包任何ref属性，同时保持响应性。

shallowReactive浅层次的作用形式

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 更改状态自身的属性是响应式的
state.foo++

// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false

// 不是响应式的
state.nested.bar++

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref。每个单独的ref都是使用toRef()创建的。

• 把一个响应式对象转换为普通对象
• 对普通对象的每一个属性都进行ref操作

toRefs配合reative使用：

当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性

reactive对象取出的所有属性值都是非响应式的，而利用toRefs可以将一个响应式reactive对象的所有原始属性转换为响应式的ref属性。

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()