使用方式
对比2.x版本需要引入
import {
watch } from 'vue'
1.处理基本数据类型
import {
ref,reactive,computed,watch } from 'vue'
<template>
姓:<input type="text" v-model="person.firstName">
<br/>
名:<input type="text" v-model="person.lastName">
<br/>
<span>{
{
person.fullName}}</span>
<br/>
全名:<input type="text" v-model="person.fullName">
<br>
<span>累加:{
{
num}}</span>
<button @click="num++">加</button>
<br>
<span>薪资:{
{
person.money}}k</span>
<button @click="person.money++">涨</button>
<br>
<span>年龄:{
{
person.age}}岁</span>
<button @click="person.age++">年龄+</button>
<br>
<span>学习天数:{
{
person.hobby.study.day}}天</span>
<button @click="person.hobby.study.day++">天数+</button>
</template>
let num = ref(0)
watch(num,(newVal,oldVal)=>{
console.log('发生变化了',newVal,oldVal)
})
2.处理引用数据类型
let person = reactive({
firstName:"",
lastName:'',
money:20,
age:10,
hobby:{
study:{
day:0
}
}
})
/*
* 监视reactive所定义的一个响应式的全部属性
* 1.注意:此处无法正确的获取oldValue
* 2.注意:强制开启了深度监视(deep配置无效)
* */
watch(person,(newVal,oldVal)=>{
console.log('发生变化了',newVal,oldVal)
})
/*
* 监视reactive所定义的一个响应式的某一个属性(不是对象)
* */
watch(()=>person.money,(newVal,oldVal)=>{
console.log('发生变化了',newVal,oldVal)
})
/*
* 监视reactive所定义的一个响应式的某一些属性
* */
watch([()=>person.money,()=>person.age],(newVal,oldVal)=>{
console.log('发生变化了',newVal,oldVal)
})
/*
* 监视reactive所定义的一个响应式的某一个属性(是对象)
* */
watch(()=>person.hobby.study,(newVal,oldVal)=>{
console.log('发生变化了',newVal,oldVal)
},{
deep:true}))
3.watchEffect
watchEffect 函数
watch: 既要指明监视的属性,也要指明监视的回调
watchEffect: 不用指明监视哪个属性,监视的回调中用到了哪个属性,那就监视哪个属性
watchEffect类似于computed:
但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值
而watchEffect更注重的是过程(回调函数的返回体),所以不用写返回值
watchEffect(()=>{
const n1 = num.value
console.log('变化了')
})