在vue中有關watch偵測到不到物件屬性的變化方面的問題

本篇文章主要介紹了關於vue中watch偵測到不到物件屬性的變化的解決方法，現在分享給大家，也給大家做個參考。

前言

在vue開發的過程中發現一個問題：改變vue.$data中物件的屬性，watch是觀測不到變化，但其實物件的屬性是有變化的。這……，有點難以置信！

正文

<template>
 <p>
  <dl>name: {{option.name}}</dl>
  <dl>age: {{option.age}}</dl>
  <dl>
   <button @click="updateAgeTo25">update age with 25</button>
  </dl>
 </p>
</template>

<script>
export default {
 data () {
  return {
   option: {
    name: "isaac",
    age: 24
   }
  }
 },
 watch: {
  option(val) {
   console.log(val)
  }
 },
 methods: {
  updateAgeTo25() {
   this.option.age = 25
  }
 }
}
</script>

#如結果所示，option.age已經更新，但是watch中的option函數並沒有被觸發。

vue的watch鉤子會那麼雞肋？我是不信的了。

深層watch

 ...
 watch: {
  option: {
   handler(newVal) {
    console.log(newVal);
   },
   deep: true,
   immediate: true
  }
 },
 ...

需要深層watch就需要開啟deep屬性

如結果所示。

另外，你會發現，在age沒有變化前也是有列印出option，這是因為開啟immediate屬性，設定為true，

該回呼將會在偵聽開始之後被立刻呼叫

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

如何解決Vue.js顯示資料的時,頁面閃現

使用vue-router如何設定每個頁面的title方法

在vue中如何實現頁面跳轉後返回原始頁面初始位置

以上是在vue中有關watch偵測到不到物件屬性的變化方面的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！