Vue93 vue3 watch监视ref属性的说明

html 复制代码
<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生成的对象。

相关推荐
穿花云烛展几秒前
实习日记2(与form表单的爱恨情仇1)
前端
岛风风9 分钟前
分享一下Monorepo 的理解和不同类型项目的目录结构
前端
ITMan彪叔12 分钟前
Tesseract OCR 页面分割模式解析
前端
w_y_fan14 分钟前
Flutter中的沉浸式模式设置
前端·flutter
游荡de蝌蚪14 分钟前
快速打造Vue后台管理系统
前端·javascript·vue.js
code_YuJun15 分钟前
3. 修改 vue.config.js 配置完成打包分析和优化
前端
文心快码BaiduComate23 分钟前
轻松实践:用Python实现“名字大作战”游戏,表白Zulu!
前端·后端·微信小程序
神毓逍遥kang1 小时前
最近学习rust,然后使用rust构建你的前端cli工具助力前端生态
前端
1024小神2 小时前
Android冷启动和热启动以及温启动都是什么意思
前端
June_liu2 小时前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript