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>