1、isRef
检查一个值是否为一个ref对象
2、isReactive
检查一个对象是否由reactive创建的响应式代理
3、isReadonly
检查一个对象是否由readonly创建的只读代理
4、isProxy
检查一个对象是否由reactive还是readonly方法创建的代理
5、unref
如果参数是一个ref则返回它的value,否则返回参数本身。它是val=isRef(val)?val.value:val的语法糖
6、toRef
toRef()函数用来将reactive对象的一个属性创建为一个ref,并且这个ref具有响应性,可以被传递
7、toRefs
toReds()函数用来将reactive独享创建为一个普通的对象,但该普通对象的每一个属性都是一个ref,并且这个ref具有响应性,
可以被传递
<template>
<div>
<p>{{count}}</p>
<p>{{name}}</p>
</div>
</template>
<script>
import {toRefs,unref,isProxy,isReadonly,isReactive,isRef,ref,reactive,readonly} from 'vue'
export default{
setup(){
/**
* isRef
*/
const count=ref(1)
/**
* isReactive
*/
const state=reactive({
name:'htt',
age:34
})
/**
* isReadonly
*/
const obj=readonly(state)
/**
* isProxy
*/
console.log(isProxy(count))
/**
* unRef
*/
console.log(isRef(count)?count.value:count)
console.log(unref(count))
/**
* toRef
*/
/**
* toRefs
*/
const stateRef=toRefs(state)
console.log(stateRef)
const change = () =>{
state.name='alive'
}
return {
// ...state,相当于state{name:'htt',age:45}
count,
//...展开运算符
...state, //这个不能作为响应式输出
change,
...toRefs(state),//相当于把state转换为一个ref对象,然后做对象展开
}
}
}
</script>
<style>
</style>