Vue3的ref和reactive的用法和区别

ref 和 reactive的用法

① ref的用法
引入： import {ref} from ‘vue’
使用：

setup(){
	const refVal=  ref( 5 );
	return { refVal}			
  }

 //常用于简单数据类型，也可以用于复杂对象。

② reactive的用法
引入： import {reactive} from ‘vue’
使用：

setup(){
	const reactiveVal=  reactive({ num:5 });
	return { reactiveVal}			
  }

 //常用于复杂的数据类型。

ref 和 reactive区别

①修改内部的值：

setup(){
	
	const refVal=  ref( 5 );
	refVal.value = 666;
	//ref修改的时候实际上是修改的{ value:5} 上的value属性。
	
	
	
	const reactiveVal=  reactive({ num:5 });
	reactiveVal.num = 666;
	//reactive的本身也是ref，只不过是通过进一步处理，省去了value属性。
	
	
	
	return { refVal,reactiveVal}		
}

②在html的渲染
# 错误写法：

<p>{{refValue.value}}</p>
<p>{{reactiveValue.num}}</p>

#正确写法：

<p>{{refValue}}</p>
<p>{{reactiveValue.num}}</p>

分析：
1.前面说了ref想拿到ref的值需要它的.value属性，为什么html中不要呢
2.首先我们打印一下ref对象：

3.我们可以看到有一个 v_isRef的属性 且为true,系统就是通过判断这个属性且为true而省略 .value 属性的。