isRef

isRef 判断是否为响应性变量

用法：isRef("变量"),

<template>
	<div >
		<h1>{
    
    {obj.name}}</h1>
		<h2>{
    
    {obj.age}}</h2>
		<h3>{
    
    {msg1}}</h3>
		<h3>{
    
    {msg2}}</h3>
		<button @click="fn">检查</button>
	</div>
</template>

<script setup>
	
    import { reactive,ref,isRef} from 'vue'; //需要引入isRef
	
      let obj=reactive({name:"小狮子",age:18})
	  
	  let msg1=ref("pink") //非响应式
	  let msg2="blue"  //响应式
	   function fn(){
		  console.log("msg1是否为响应式:",isRef(msg1))
		   console.log("msg2是否为响应式:",isRef(msg2))
		    console.log("obj.name是否为响应式:",isRef(obj.name))
	  }

	  
</script>

<style  scoped>

</style>

点击按钮控制台打印

从obj.name不是响应式数据看出引用数据的属性值不是响应式的。

toRef

toRef 把引用数据的属性值设置为变量并且关联和设置为响应性变量

用法：let x=toRef(obj,"x") // 隐式 let x=ref(obj.x);并且响应到obj对象去,在script里边取值时要用 .value
<template>
	<div >
		<h1>{
    
    {obj.name}}</h1>
		<h2>{
    
    {obj.age}}</h2>
		<h3>{
    
    {msg1}}</h3>
		<h3>{
    
    {msg2}}</h3>
		<button @click="fn">检查</button>
	</div>
</template>

<script setup>

    import { reactive,ref,isRef,toRef} from 'vue';
	
      let obj=reactive({name:"小狮子",age:18})
	  
	  let msg1=ref("pink")
	  let msg2="blue"
	  
	  let name=toRef(obj,"name")// 隐式 let name=ref(obj.name);并且响应到obj对象去
	   function fn(){
		  console.log("msg1是否为响应式:",isRef(msg1))
		   console.log("msg2是否为响应式:",isRef(msg2))
		    console.log("obj.name是否为响应式:",isRef(obj.name))
			console.log(name.value,isRef(name))
			name.value="小羊" //在script里边取值时要用 .value
			console.log(name.value,isRef(name))
	  }

	  
</script>

<style  scoped>

</style>
点击按钮之后界面和控制台：

控制台打印为true说明为obj.name成功变为响应式数据，再由界面的小狮子变为小羊说明该响应式数据成功响应到了obj对象里去

toRefs

toRefs 引用数据响应式解构

用法：如，let obj2=reactive({a:10,b:20})
let {a,b}=toRefs(obj2)//a,b变量具备响应功能、在script里边取值时要用 .value

普通的结构是不能具备响应式数据的如：

<template>
	<div >
		
		<h3>这是obj</h3>
		<h1>{
    
    {obj.name}}</h1>
		<h2>{
    
    {obj.age}}</h2>
		
		<h3>这是普通解构</h3>
		<h1>{
    
    {name}}</h1>
		<h2>{
    
    {age}}</h2>

		<button @click="fn">改变解构属性值</button>
	</div>
</template>

<script setup>

    import { reactive,ref,isRef,toRef,toRefs} from 'vue';
	
      let obj=reactive({name:"小狮子",age:18})
	  
	  let {name,age}=obj
	  // let {name.age}=toRefs(obj)
	  
	   function fn(){
		   console.log(name,age)
          name="小羊"
		  age=20
		  console.log(name,age)
	  }

	  
</script>

<style  scoped>

</style>

点击按钮后界面和控制台：

发现数据刷新界面却没有刷新，说明普通解构是不具有响应式数据的。

我们稍作改变如：

<template>
	<div >
		
		<h3>这是obj</h3>
		<h1>{
    
    {obj.name}}</h1>
		<h2>{
    
    {obj.age}}</h2>
		
		<h3>这是toRefs解构</h3>
		<h1>{
    
    {name}}</h1>
		<h2>{
    
    {age}}</h2>

		<button @click="fn">改变解构属性值</button>
	</div>
</template>

<script setup>

    import { reactive,ref,isRef,toRef,toRefs} from 'vue';
	
      let obj=reactive({name:"小狮子",age:18})
	  
	  let {name,age}=toRefs(obj)  //toRefs解构

	  
	   function fn(){
		 console.log(name.value,age.value)
          name.value="小羊" //取值要用.value
		  age.value=20
		  console.log(name.value,age.value)
	  }

	  
</script>

<style  scoped>

</style>

此时再点击按钮得到的变化为：

由此可以看出数据改变界面也跟着改变，所以 toRefs解构是响应式数据

readonly

readonly 把数据变为只读功能

用法：如：let obj=readonly ({ })

<template>
	<div >
		
		<h3>这是obj</h3>
		<h1>{
    
    {obj1.name}}</h1>
		<h2>{
    
    {obj1.age}}</h2>

		<button @click="fn">改变解构属性值</button>
	</div>
</template>

<script setup>

    import { reactive,ref,isRef,toRef,toRefs,readonly} from 'vue'; //必须引入readonly
	
      let obj=reactive({name:"小狮子",age:18})
	  let obj1=readonly(obj) //设置为只读
	  
	  
	   function fn(){
		console.log(obj1.name,obj1.age,1111)
		obj1.name="小羊"
		obj1.age=20
		console.log(obj1.name,obj1.age,2222)
	  }

	  
</script>

<style  scoped>

</style>

点击按钮之后界面和控制台：

由此看出数据没有被改变，且界面也没有刷新。

vue3中的isRef toRef toRefs readonly

isRef

toRef

toRefs

readonly

猜你喜欢