VUE3响应工具集

Posted 2021-09-10 月疯

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>