Vue3.0文档学习心得--响应式工具

1.isRef：检查某个值是否为 ref。返回值是true或者false

let foo: unknown    //返回值是一个类型判定 (type predicate)，这意味着 isRef 可以被用作类型守卫。
if (isRef(foo)) {    
  // foo 的类型被收窄为了 Ref<unknown>
  foo.value
}

 

2.isProxy:检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

( reactive()、readonly()、shallowReactive() 或 shallowReadonly()的原理是在外层包裹proxy）

 

3.isReactive：检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

 

4.isReadonly():检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。

通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，因为他们是没有 set 函数的 computed() ref。

 

5.unref():如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语糖。

 

6.toRef():基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

【使用场景：为了不定义过多的ref对象，一般把所有要用的数据都放在对象里，使用reactive来保证其响应式，但是需要使用值的时候会导致都是通过对象.属性名来获取其值，可以使用toRef来对reactive对象的属性单独赋予响应式，转化为ref对象，方便使用】

 

(1)使用示例：

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

const fooRef = toRef(state, 'foo')  //针对的是属性，而对象

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

(2)注意事项

　　2.1 不等同于const fooRef = ref(state.foo)，这个 ref() 接收到的是一个纯数值。

　　2.2 与props配合使用时，禁止对 props 做出更改的限制依然有效。尝试将新的值传递给 ref 等效于尝试直接更改 props，这是不允许的。在这种场景下，你可能可以考虑使用带有 get 和 set 的 computed 替代。（可以通过toref取出

props，但不允许对其进行赋值等操作等）

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {    //要具有响应式的解构props，需要使用toRef解构props
    // 将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}

　　2.3即使源属性当前不存在，toRef() 也会返回一个可用的 ref。这让它在处理可选 props 的时候格外实用，相比之下 toRefs 就不会为可选 props 创建对应的 refs。

 

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

(1)使用示例：

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

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

(2)如同toRef中所说具有结构而不失去响应性，经常用在组合式函数中返回响应式对象。

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

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

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

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

(3)toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用 toRef。

对应toRef中的2.3所说的点。