Vue3.0教程005：watch监视ref定义的【基本类型】数据和【对象类型】数据

4、watch监视

4.1 前言

• 作用：监视数据的变化（和vue2中的watch作用一致）
• 特点：Vue3中的watch只能监视以下四种数据：
  • ref定义的数据。
  • reactive定义的数据。
  • 函数返回一个值。
  • 一个包含上述内容的数组。

4.2 情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

<template><div><el-card style="max-width: 480px"><template #header><div class="card-header"><span>监视【ref】定义的【基本类型】数据</span></div></template><h2>当前求和为：{{sum}}</h2><el-button type="success" @click="changeSum">点我+1</el-button><template #footer>监视属性watch：<el-tag type="info">情况一</el-tag></template></el-card></div>
</template><script lang="ts" setup>
import {ref, watch} from 'vue'let sum = ref(0)function changeSum(){sum.value += 1;
}// 监视 watch(谁?, 回调函数)
watch(sum, (newValue, oldValue)=>{console.log('sum变化了', newValue, oldValue);
})
</script><style scoped></style>

注意：

• 监视ref数据的时候，不需要写value
  • watch(sum, (newValue, oldValue))

4.3 情况二

监视ref定义的对象类型数据，实现代码：

<template><div><el-row :gutter="4"><el-col :span="12"><el-card style="max-width: 480px"><template #header><div class="card-header"><span>监视【ref】定义的【基本类型】数据</span></div></template><h2>当前求和为：{{sum}}</h2><el-button size="small" type="success" @click="changeSum">点我+1</el-button><template #footer>监视属性watch：<el-tag type="info">情况一</el-tag></template></el-card></el-col><el-col :span="12"><el-card style="max-width: 480px"><template #header><div class="card-header"><span>监视【ref】定义的【对象类型】数据</span></div></template><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><el-button size="small" type="primary" @click="changeName">修改名字</el-button><el-button size="small" type="success" @click="changeAge">修改年龄</el-button><el-button size="small" type="danger" @click="changePerson">修改全部</el-button><template #footer>监视属性watch：<el-tag type="info">情况二</el-tag></template></el-card></el-col></el-row></div>
</template><script lang="ts" setup>
import {ref, watch} from 'vue'let sum = ref(0)let person = ref({name: '张三',age: 18
})function changeSum(){sum.value += 1;
}function changeName(){person.value.name += '~'
}function changeAge(){person.value.age += 1
}function changePerson(){person.value = {name: '李四', age: 25}
}// 监视 watch(谁?, 回调函数)
watch(sum, (newValue, oldValue)=>{console.log('✅sum变化了', newValue, oldValue)
})watch(person, (newValue, oldValue)=>{console.log("✅person变化了：",newValue, oldValue)
})
</script><style scoped></style>

实现效果，这里监视的是整个对象，只有点击【修改全部】的时候，才能触发监视器：

如果想监视对象的某一个属性【name/age】，则需要开启深度监视，修改监视代码，添加deep:true：

watch(person, (newValue, oldValue)=>{console.log("✅person变化了：",newValue, oldValue)
},{deep:true})

实现效果：

如果开启立即监视，即刷新页面的时候，当数据没有改变的时候就监视，实现代码如下：

watch(person, (newValue, oldValue)=>{console.log("✅person变化了：",newValue, oldValue)
},{deep:true, immediate:true})

打印结果如下，当刷新浏览器，页面数据没有变化，但仍会默认监视，但是此时旧的值是undefined：