html
<template>
<div class="ttt">
<h2>{{age}}</h2>
<button @click="addAge">年龄+1</button>
<h2>{{age2}}</h2>
<button @click="updateReactive2">更新数据</button>
<h2>{{refObj}}</h2>
<h2>reactive3:{{reactive3}}</h2>
</div>
</template>
<script setup lang="ts" name="testName">
import {ref} from 'vue'
import {reactive} from 'vue'
import {toRefs} from 'vue'
import {toRef} from 'vue'
import {computed} from 'vue'
import {watch} from 'vue'
let refObj = ref([
{id:1,name:'ref对象'},
{id:2,name:'测试咯'}
])
function updateReactive2(){
refObj.value = {id:3,name:'测试一下'}
toRefId.value = 2 +1
fullName.value = "啦啦啦啦啦"
}
//监视对象
watch(refObj,(newValue,oldValue)=>{
console.log("对象变化",newValue,oldValue)
},{deep:true})//
let age = ref(1)
function addAge(){
age.value = age.value + 1
age2 += 1
refObj.value.name= 6666
}
//监视变量
const swatch = watch(age,(newValue,oldValue)=>{
console.log("数据值",newValue,oldValue)
if(newValue>5){
swatch()
}
})
let reactive3 = reactive({id:1,name:'13123132测试数据'})
//多属性监视
const swatch2 = watch([()=>reactive3.id,()=>reactive3.name],(newValue,oldValue)=>{
console.log("reactive对象多属性变化",newValue,oldValue)
})
</script>
<style>
.ttt{
color:red
}
</style>
以上代码,对变量和对象做了一个监听,deep
监视reactive会默认开启深度监视,ref需要指定{deep:true}才可以开启深度监视