Vue93 vue3 watch监视ref属性的说明

<template>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我+1</button>
<hr>
<h2>当前的信息为：{{msg}}</h2>
<button @click="msg+='！'">修改信息</button>
<hr>
<h2>姓名：{{person.name}}</h2>
<h2>年龄：{{person.age}}</h2>
<h2>薪资：{{person.job.j1.salary}}K</h2>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">增长年龄</button>
<button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import {ref,reactive,watch} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
let msg = ref('你好啊')
let person = ref({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})

console.log(person)

watch(sum,(newValue,oldValue)=>{
console.log('sum的值变化了',newValue,oldValue)
})

watch(person,(newValue,oldValue)=>{
console.log('person的值变化了',newValue,oldValue)
},{deep:true})


//返回一个对象（常用）
return {
sum,
msg,
person
}
}
}
</script>

监视person时，不加.value是监视person对象。加了.value是监视person内部通过reactive生成的对象。

原文地址：https://blog.csdn.net/Rockandrollman/article/details/143083951

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！