ref和reactive区别

ref是什么类型变量都可以定义，而reactive只能定义数组和对象

比如

ref定义字符串

//定义
const msg=ref("hellow world");//
//事件调用
function append(){//拼感叹号在尾巴
	msg.value+="!"
}

ref定义对象

//定义
const counter=ref({num:1})
//事件调用
function append(){//拼感叹号在尾巴
	msg.value.num+="!"
}

而reactive只能定义对象和数组

reactive定义对象

//定义
const counter=reactive({num:1})
//事件调用
function append(){//拼感叹号在尾巴
	msg.num+="!"
}

reactive定义数组

const counter=reactive([{id:1,name:"你好"}])

function pusher(){
	counter.push({id:2,name:"啊啊"})
}

你对比下上面两个定义对象时候的写法

ref 是都要写.value的 所以看个人习惯，博主闲麻烦。

注意   ，你最好跑跑博主的ref例子，能明白多少看造化了 

<script setup lang="ts">
	import {ref } from 'vue'
    interface myType{
		id:Number;
		name?:string
	}
	//type myType={
	//	id:Number,
	//	name?:string
	//}
	const obj={
		a:ref<string|number>(0),//这样写，string|number  就算值突然变成 字符串，他也是响应的
		b:ref<myType[]|null>(null),
		c:"dsad",//不响应
	}
	let {a,b,c}=obj;
	a.value="sss"
	b.value=[{id:1},{id:2,name:"你好"},{id:3,name:"啊啊"}]
	c="eeeee"
</script>
<template>
	<div class="box">
		<h3></h3>
		<div>
			{{obj}}
			<br/>
			a是响应的 {{a}}	
			<br/>
			b是响应式{{b}}
			<br/>
			c不响应   {{c}}
			<br/>
			d不响应 {{d}}
		</div>
	</div>
	
</template>
<style>
	.box{display: block;text-align:center;margin: 50px 0 0;}
	.ml_10{margin-left:10px}
</style>

下面就是 reactive+ts了。如果有错误可以在评论区指出。谢谢

<script setup lang="ts">
	import {reactive,ref } from 'vue'
    interface myType{
		id:Number;
		name?:string
	}
    
	//type myType={
	//	id:Number,
	//	name?:string
	//}
	// const obj=reactive({
	// 	a:1,
	// 	b:ref<null|myType[]>(null)
	// })
	//也可以写成下面，先申明在 赋值
	const obj:{
		a:number|string;
		b:null|myType[]
	}=reactive({
		a:1,
		b:null
	})
	obj.b=[{id:1,name:"你好"}]
	obj.a=2// 绑定
</script>
<template>
	<div class="box">
		<h3></h3>
		<div>
			{{obj}}
			<br/>
			a 值是{{obj.a}}  绑定
			<br/>
			b 值是{{obj.b}}  绑定
			<br/>
		</div>
	</div>
	
</template>
<style>
	.box{display: block;text-align:center;margin: 50px 0 0;}
	.ml_10{margin-left:10px}
</style>

关于refs组件的绑定

<script setup lang="ts">
	import {onMounted, ref } from 'vue'
	const el=ref<HTMLInputElement|null>(null)
	const inputVal=ref<string>("")
	const inputVal2=ref("")
	onMounted(()=>{
		el.value?.focus();
	})
	// const inputEvent=(e:any)=>{
	// 	inputVal.value=e.target.value
	// }
	//写法二
	const inputEvent=(e:Event)=>{
		inputVal.value=(e.target as HTMLInputElement).value
	}
</script>
<template>
	<div class="box">
		<h3></h3>
		<div>
			inputVal:{{inputVal}}<br/>
			inputVal2:{{inputVal2}}<br/>
			<input type="text" @change="inputEvent" ref="el" v-model='inputVal2'/>
		</div>
	</div>
	
</template>
<style>
	.box{display: block;text-align:center;margin: 50px 0 0;}
	.ml_10{margin-left:10px}
</style>