快捷導(dǎo)航

詳解vue3中watch監(jiān)聽的幾種情況

更新時間：2025年03月28日 09:38:38 作者：藍色海島

watch是CompositionAPI的一部分,用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,本文主要介紹了詳解vue3中watch監(jiān)聽的幾種情況,具有一定的參考價值,感興趣的可以了解一下

一、監(jiān)聽ref創(chuàng)建的基本數(shù)據(jù)類型
二、監(jiān)聽ref創(chuàng)建的對象類型
三、監(jiān)聽reactive定義的對象類型數(shù)據(jù)，會默認開啟深度監(jiān)聽
四、監(jiān)聽ref或reactive定義的對象類型中的某個屬性
總結(jié)：

一、監(jiān)聽ref創(chuàng)建的基本數(shù)據(jù)類型

watch的第一個參數(shù)直接寫需要監(jiān)聽的數(shù)據(jù)名即可，監(jiān)聽的是其值的變化
    <div>
      <h1>情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)</h1>
      <h2>當前求和為：{{ sum }}</h2>
      <el-button @click="changeSum">點我sum+1</el-button>
    </div>
    
// 數(shù)據(jù)
let sum = ref(0)
// 方法
function changeSum() {
  sum.value += 1
}
// 監(jiān)視，情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log('sum變化了', newValue, oldValue)
  if (newValue >= 10) {
    stopWatch()
  }
})

二、監(jiān)聽ref創(chuàng)建的對象類型

watch監(jiān)聽person時，監(jiān)聽的是person的地址值，只有當person的引用地址發(fā)生變化時才能監(jiān)聽得到，當寫成Object.assign(person.value, { name: '李四', age: 90, son: { age: 5 } })時依然監(jiān)聽不到
當開啟deep: true時，無論修改person中的哪個參數(shù)，包括son對象，都能監(jiān)聽得到

   <div>
      <h1>情況二：監(jiān)視【ref】定義的【對象類型】數(shù)據(jù)</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年齡：{{ person.age }}</h2>
      <h2>兒子年齡：{{ person.son.age }}</h2>
      <el-button @click="changeName">修改名字</el-button>
      <el-button @click="changeAge">修改年齡</el-button>
      <el-button @click="changePerson">修改整個人</el-button>
      <el-button @click="changeSonAge">修改兒子年齡</el-button>
    </div>
    
// 數(shù)據(jù)
let person = ref({
  name: '張三',
  age: 18,
  son: { age: 5 }
})
// 方法
function changeName() {
  person.value.name += '~'
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = { name: '李四', age: 90, son: { age: 5 } }
}
function changeSonAge() {
  person.value.son.age += 1
}
watch(
  person,
  (newValue, oldValue) => {
    console.log('person變化了', newValue, oldValue)
  },
  { deep: true }
)

三、監(jiān)聽reactive定義的對象類型數(shù)據(jù)，會默認開啟深度監(jiān)聽

前面提到，如果是監(jiān)聽ref創(chuàng)建的對象類型數(shù)據(jù)，需要手動開啟深度監(jiān)聽，而監(jiān)聽reactive創(chuàng)建的對象類型數(shù)據(jù)時，會自動開啟深度監(jiān)聽

  <div>
      <h1>情況三：監(jiān)視【reactive】定義的【對象類型】數(shù)據(jù)</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年齡：{{ person.age }}</h2>
      <el-button @click="changeName">修改名字</el-button>
      <el-button @click="changeAge">修改年齡</el-button>
      <el-button @click="changePerson">修改整個人</el-button>
      <hr />
      <h2>測試：{{ obj.a.b.c }}</h2>
      <el-button @click="test">修改obj.a.b.c</el-button>
    </div>
    
// 數(shù)據(jù)
let person = reactive({ name: '張三', age: 18 })
let obj = reactive({ a: { b: { c: 666 } } })
// 方法
function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changePerson() {
  Object.assign(person, { name: '李四', age: 80 })
}
function test() {
  obj.a.b.c += 888
}

// 監(jiān)視，情況三：監(jiān)視【reactive】定義的【對象類型】數(shù)據(jù)，且默認是開啟深度監(jiān)視的
watch(person, (newValue, oldValue) => {
  console.log('person變化了', newValue, oldValue)
})
watch(obj, (newValue, oldValue) => {
  console.log('Obj變化了', newValue, oldValue)
})

四、監(jiān)聽ref或reactive定義的對象類型中的某個屬性

監(jiān)聽的是對象的基本類型數(shù)據(jù)，要寫成函數(shù)形式
監(jiān)聽的是對象的對象類型數(shù)據(jù)，可以寫成函數(shù)形式，也可以直接寫
監(jiān)聽的是對象的對象類型數(shù)據(jù)，并且改變對象時改變了應(yīng)用地址，例如person.car = { ... }，就必須要寫成函數(shù)形式

 <div>
      <h1>情況四：監(jiān)視【ref】或【reactive】定義的【對象類型】數(shù)據(jù)中的某個屬性</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年齡：{{ person.age }}</h2>
      <h2>汽車：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
      <el-button @click="changeName">修改名字</el-button>
      <el-button @click="changeAge">修改年齡</el-button>
      <el-button @click="changeC1">修改第一臺車</el-button>
      <el-button @click="changeC2">修改第二臺車</el-button>
      <el-button @click="changeCar">修改整個車</el-button>
    </div>
    
// 數(shù)據(jù)
let person = reactive({ name: '張三', age: 18, car: { c1: '奔馳', c2: '寶馬' } })
// 方法
function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changeC1() {
  person.car.c1 = '奧迪'
}
function changeC2() {
  person.car.c2 = '大眾'
}
function changeCar() {
  // person.car = { c1: '雅迪', c2: '愛瑪' }
  Object.assign(person.car, { c1: '雅迪', c2: '愛瑪' })
}
// 監(jiān)視，情況四：監(jiān)視響應(yīng)式對象中的某個屬性，且該屬性是基本類型的，要寫成函數(shù)式
watch(
  () => person.name,
  (newValue, oldValue) => {
    console.log('person.name變化了', newValue, oldValue)
  }
)
watch(
  () => person.car, // 如果使用 person.car = { ... } 必須要使用函數(shù)寫法；如果使用Object.assign，可以直接寫person.car
  (newValue, oldValue) => {
    console.log('person.car變化了', newValue, oldValue)
  },
  { deep: true }
)

如果需要監(jiān)聽多個數(shù)據(jù)，可以將2個watch合并為一個：

watch(
  [() => person.name, () => person.car],
  (newValue, oldValue) => {
    console.log('person.car變化了', newValue, oldValue)
  },
  { deep: true }
)

總結(jié)：

監(jiān)聽ref創(chuàng)建的基本數(shù)據(jù)類型，必須直接寫，不可以寫成函數(shù)形式
監(jiān)聽ref創(chuàng)建的對象數(shù)據(jù)類型，可以直接寫，也可以寫成函數(shù)形式，需要開啟deep: true
監(jiān)聽reactive創(chuàng)建的對象數(shù)據(jù)類型，必須直接寫，不可以寫成函數(shù)形式，默認開啟了deep: true
監(jiān)聽ref或reactive創(chuàng)建的對象類型中的某個屬性，該類型為基本數(shù)據(jù)類型，必須寫成函數(shù)形式
監(jiān)聽ref或reactive創(chuàng)建的對象類型中的某個屬性，該類型為對象數(shù)據(jù)類型，可以直接寫，也可以寫成函數(shù)形式，需要開啟deep: true。如果想要監(jiān)聽引用地址變化，必須寫成函數(shù)形式

序號	情況	是否使用函數(shù)寫法	是否需要手動開啟深度監(jiān)聽
1	監(jiān)聽ref創(chuàng)建的基本數(shù)據(jù)類型	否。必須直接寫，不可以寫成函數(shù)形式	否
2	監(jiān)聽ref創(chuàng)建的對象數(shù)據(jù)類型	皆可?？梢灾苯訉?，也可以寫成函數(shù)形式	是
3	監(jiān)聽reactive創(chuàng)建的對象數(shù)據(jù)類型	否。必須直接寫，不可以寫成函數(shù)形式	否。默認開啟了深度監(jiān)聽
4	監(jiān)聽ref或reactive創(chuàng)建的對象類型中的某個屬性，該類型為基本數(shù)據(jù)類型	是。必須寫成函數(shù)形式	否
5	監(jiān)聽ref或reactive創(chuàng)建的對象類型中的某個屬性，該類型為對象數(shù)據(jù)類型	皆可?？梢灾苯訉懀部梢詫懗珊瘮?shù)形式；如果想要監(jiān)聽引用地址變化，必須寫成函數(shù)形式	是