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 的值,反之亦然。
(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所说的点。
标签:--,学习心得,toRef,state,Vue3.0,props,foo,ref,属性 From: https://www.cnblogs.com/LylePark/p/16976342.html