vue3中的isRef toRef toRefs readonly

目录

isRef  

toRef

 toRefs

 readonly

---

isRef  

isRef 判断是否为响应性变量 

用法：isRef("变量"),

 
<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

 
<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

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

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

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

 

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

我们稍作改变如：

 
<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 ({ })

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

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

 

 

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