一、作用
监视数据的变化(和vue2中watch作用一致)
二、特点
vue3中的watch只能监视以下四种数据:
- ref定义的数据
- reactive定义的数据
- 函数返回一个值(getter函数)
- 一个包含上述内容的数组
情况三:监听响应式对象的某一个属性值(函数返回一个值)
(1)监听响应式对象的某一个基本数据类型的属性值
js
<template>
<div>
<h1>找对象</h1>
<h2>姓名: {{ person.name }}</h2> <br>
<h2>年龄: {{ person.age }}</h2> <br>
<h2>第一台车: {{ person.car.car1 }}</h2>
<h2>第二台车: {{ person.car.car2 }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeCar1">修改第一台车</button>
<button @click="changeCar">修改所有车</button>
</div>
</template>
<script setup lang="ts">
//引入watch
import { reactive, watch } from 'vue'
let person = reactive({
name: '胡歌',
age: 25,
car: {
car1: '奔驰A6',
car2: '宝马x5'
}
})
//只修改person内部的name属性
function changeName() {
person.name = '彭于晏'
}
//监听响应式对象的某个属性值,若该属性值不是对象属性,需要写成函数形式。
watch(() => person.name, (newValue, oldValue)=> {
console.log('换对象名字被监听了',newValue, oldValue)
})
</script>
此时watch只会监听person下面的name变化,因为name是一个基本数据类型,所以必须写成函数形式,且返回一个值,这个值就是要监听的name。
(2)监听响应式对象的某一个对象类型的属性值
js
<template>
<div>
<h1>找对象</h1>
<h2>姓名: {{ person.name }}</h2> <br>
<h2>年龄: {{ person.age }}</h2> <br>
<h2>第一台车: {{ person.car.car1 }}</h2>
<h2>第二台车: {{ person.car.car2 }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeCar1">修改第一台车</button>
<button @click="changeCar">修改所有车</button>
</div>
</template>
<script setup lang="ts">
//引入watch
import { reactive, watch } from 'vue'
let person = reactive({
name: '胡歌',
age: 25,
car: {
car1: '奔驰A6',
car2: '宝马x5'
}
})
//修改第一台车
function changeCar1 () {
person.car.car1 = '小米su7'
}
//修改所有车
function changeCar () {
person.car = {
car1: '海豹',
car2: '沃尔沃s90'
}
}
//监听响应式对象的某个属性值,若该属性值是对象属性,可直接写属性值
watch( person.car, (newValue, oldValue)=> {
console.log('换轿车被监听了',newValue, oldValue)
})
</script>
因为监听的属性是一个对象,那么可以直接person.car,但是点击修改第一台车,watch会监听,但点击修改所有车,watch不会监听,如果想要全部都监听到,那必须写成函数形式:
js
//监听响应式对象的某个属性值,若该属性值是对象属性,也可写成函数形式,但建议写成函数形式。
watch(() => person.car, (newValue, oldValue)=> {
console.log('换轿车被监听了',newValue, oldValue)
}, {deep: true})
此时看到控制台,不管是修改第一台车,还是修改所有车,watch都能监听到,但前提是必须加watch的第三个参数,deep为true,意思是开启深度监听。如果不加深度监听,那么watch只会监听修改所有车,那就是值监听这个属性本身。
总结
若想监听某个响应式对象的属性值,不管这个属性值是基本数据类型还是对象数据类型,都建议写成函数形式;如果需要关注对象内部,则手动开启深度监听,则加一个deep:true。