VUE3响应工具集

╰+攻爆jí腚メ 2022-09-08 14:48 157阅读 0赞

> 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>