Vue的watch中immediate與watch指的是什么意思

這篇文章主要介紹了Vue的watch中immediate與watch指的是什么意思，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

immediate

immediate設為true后，則監聽的這個對象會立即輸出，也就是說一刷新頁面就會在控制臺輸出，當然此時頁面上的數據我們還沒來得及手動讓其發生變化，所以在控制臺輸出的newValue為我們在代碼中默認設置的值，oldValue輸出為“undefined”。如

當我們手動改變newValue.id的值后，輸出如下：

如果不設置immediate，或者將immediate設為false的話，則刷新頁面后不會立即監聽此對象，也就是控制臺不會有輸出，必須要監聽的對象有值改變時控制臺才會有輸出。

data() {
   return {
    value:''
   };
  },
  watch:{
   value:{
    handler:'init',
    immediate:true
   }
  },
  methods: {
   init(){
    alert(1)
   }
  }

deep設為true后，就可以深入監聽了。簡單點說，就是可以監聽到對象里面的值的變化了

<div>
  <input type="text" v-model="student.studentName">{{student.studentName}}
 </div>
 

student:{
     studentName:'xi'
    }

watch:{
  student:{
    handler:function (newValue,oldValue) {
     console.log(newValue,'new')
     console.log(oldValue,'old')
    },
     deep:true,
     immediate:true
   }

}

不加deep監聽不到改變

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue的watch中immediate與watch指的是什么意思”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!