介绍
监视 ref 或 reactive 对象中的某个属性
注意：
- 监视的属性是 基本类型，需要写成函数，返回该属性
- 监视的属性是 对象类型，可直接监视（缺点：赋值新对象时，无法监视到），强烈推荐写成函数，返回该属性
例子1：监视的属性是 基本类型
监视的属性是 基本类型，需要写成函数，返回该属性
HTML代码：
<template>
年龄： <input type="text" v-model="student.age" />
<br>
密码： <input type="text" v-model="student.password" />
<br>
<button @click="modify">给student赋新值</button>
</template>
ts代码：
<script lang="ts" setup name='Student'>
// 导入 watch
import { reactive,watch } from 'vue'
// 年龄
let student = reactive({
age:'',
password:'',
})
// 监视器，只监视age，只有age值发生变化时，才会执行函数
watch(
// 定义函数，返回age属性，否则监听不到
()=> student.age,
(newValue,oldValue)=>{
console.log("新值：",newValue)
console.log("原值：",oldValue)
}
)
// 给student赋新对象
function modify(){
Object.assign(
student,
{
age:'20',
password:'123456'
},
)
}
</script>
例子2-1：监视的属性是 对象类型（不推荐）
监视的属性是 对象类型，可直接监视（缺点：赋值新对象时，无法监视到）
HTML代码：
<template>
年龄： <input type="text" v-model="student.age" />
<br>
密码： <input type="text" v-model="student.password" />
<br>
数学：<input type="text" v-model="student.score.shuxue" />
<br>
语文：<input type="text" v-model="student.score.yuwen" />
<br>
<button @click="modify">给score赋新值</button>
</template>
TS代码：
<script lang="ts" setup name='Student'>
// 导入 watch
import { reactive,watch } from 'vue'
// 年龄
let student = reactive({
age:'',
password:'',
score:{
shuxue:'80',
yuwen:'70',
}
})
// 监视器，只监视对象中的score属性，该属性也是对象
watch(student.score,
(newValue,oldValue)=>{
console.log("新值：",newValue)
console.log("原值：",oldValue)
}
)
// 给student的score属性赋新对象
function modify(){
student.score = {
shuxue:'10',
yuwen:'20',
}
}
</script>
特点
- 监视的属性是 对象类型，可直接监视
- 缺点：赋值新对象时，无法监视到
原因：赋值新对象时，无法监视到
例子2-2：监视的属性是 对象类型（推荐）
HTML代码：
<template>
年龄： <input type="text" v-model="student.age" />
<br>
密码： <input type="text" v-model="student.password" />
<br>
数学：<input type="text" v-model="student.score.shuxue" />
<br>
语文：<input type="text" v-model="student.score.yuwen" />
<br>
<button @click="modify">给score赋新值</button>
</template>
TS代码：
<script lang="ts" setup name='Student'>
// 导入 watch
import { reactive,watch } from 'vue'
// 年龄
let student = reactive({
age:'',
password:'',
score:{
shuxue:'80',
yuwen:'70',
}
})
// 监视器，只监视对象中的score属性，该属性也是对象
watch(
()=>student.score,
(newValue,oldValue)=>{
console.log("新值：",newValue)
console.log("原值：",oldValue)
},
{
// 不开启深度监视，给score赋新对象时才能监听到
// 开启深度监视，修改score中的属性值，也能够监听到
deep:true
}
)
// 给student的score属性赋新对象
function modify(){
student.score = {
shuxue:'10',
yuwen:'20',
}
}
</script>
特点
- 默认情况，给
score赋新对象时才能监听到 - 开启深度监视，修改
score中的属性值，也能够监听到