關于vue中watch檢測到不到對象屬性的變化的解決方法

更新時間：2018年02月08日 11:23:30 作者：issac_寶華

本篇文章主要介紹了關于vue中watch檢測到不到對象屬性的變化的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

在vue開發(fā)的過程中發(fā)現(xiàn)一個問題：改變vue.$data中對象的屬性，watch是觀測不到變化，但其實對象的屬性是有變化的。這……，有點難以置信！

正文

<template>
 <div>
  <dl>name: {{option.name}}</dl>
  <dl>age: {{option.age}}</dl>
  <dl>
   <button @click="updateAgeTo25">update age with 25</button>
  </dl>
 </div>
</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已經(jīng)更新，但是watch中的option函數(shù)并沒有被觸發(fā)。

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

深層watch

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

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

如結果所示。

另外，你會發(fā)現(xiàn)，在age沒有變化前也是有打印出option，這是因為開啟immediate屬性，設定為true，

該回調將會在偵聽開始之后被立即調用

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue利用computer解決單項數(shù)據(jù)流的問題詳解
Vue 是一個非常流行和強大的前端框架，它讓我們可以用簡潔和優(yōu)雅的方式來構建用戶界面，今天我們來分享一個 Vue 中非常經(jīng)典的問題，也是一個非常實用的技巧，希望對大家有所幫助
2023-07-07
在idea上Vue的安裝和創(chuàng)建過程
本文詳細介紹了如何在計算機上安裝和配置Node.js,包括下載Node.js,驗證安裝成功,配置npm的全局模塊目錄和緩存目錄,設置環(huán)境變量,配置npm鏡像,安裝Vue.js等步驟,通過這些指導,你可以在IDEA上成功創(chuàng)建和運行Vue項目
2024-10-10
VUE中data配置項詳細解析
data屬性是Vue實例的數(shù)據(jù)對象,可以綁定的是對象或者是函數(shù),下面這篇文章主要給大家介紹了關于VUE中data配置項詳細解析的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02
vue Tab切換以及緩存頁面處理的幾種方式
相信tab切換對于大家來說都不算陌生，后臺管理系統(tǒng)中多會用到。如果不知道的話，可以看一下瀏覽器上方的標簽頁切換，大概效果就是這樣。
2021-05-05
vant中field組件label屬性兩端對齊問題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對齊問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue3實現(xiàn)批量異步更新
這篇文章主要為大家詳細介紹了Vue3批量異步更新是如何實現(xiàn)的，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以跟隨小編一起學習一下
2023-08-08
基于vue的video播放器的實現(xiàn)示例
這篇文章主要介紹了基于vue的video播放器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
vue實現(xiàn)form表單與table表格的數(shù)據(jù)關聯(lián)功能示例
這篇文章主要介紹了vue實現(xiàn)form表單與table表格的數(shù)據(jù)關聯(lián)功能,涉及vue.js表單事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案
這篇文章主要介紹了vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的問題及解決方案，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-12-12
vue3中的ref與reactive使用方法對比
Vue3 提供了兩個新的 API：ref 和 reactive，它們可以幫助我們更好地管理和處理響應式數(shù)據(jù)，這篇文章主要介紹了vue3中的ref與reactive的區(qū)別和使用方法,需要的朋友可以參考下
2023-04-04