watch
- 和Vue2基本相似,配置是一样的
- 两个坑:
- 监视reactive定义的响应式数据时:oldVal无法正确的获取,强制开启了深度监视(deep配置无效)
- 监视reactive定义的响应式数据中的某个属性(对象)时:deep配置有效
<template>
<h1>{
{num}}</h>
<h1>{
{msg}}</h>
</template>
<script>
import {ref,reactive,watch} from 'vue'
exprot default {
name: 'App',
setup() {
let num = ref(0)
let msg= ref('消息')
let p = reactive({
name: '景天',
age: 18,
a: {
b: {
c: 100
}
}
})
// 1. 监视ref所定义的一个响应式数据
watch(num,(newVal,oldVal)=> {
console.log(newVal,oldVal)
},{immediate:true})
// 2. 监视ref所定义的多个响应式数据
watch([num,msg],(newVal,