關(guān)于vue中watch檢測(cè)到不到對(duì)象屬性的變化的解決方法
更新時(shí)間：2018年02月08日 11:23:30 作者：issac_寶華
本篇文章主要介紹了關(guān)于vue中watch檢測(cè)到不到對(duì)象屬性的變化的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
前言
在vue開發(fā)的過程中發(fā)現(xiàn)一個(gè)問題：改變vue.$data中對(duì)象的屬性，watch是觀測(cè)不到變化，但其實(shí)對(duì)象的屬性是有變化的。這……，有點(diǎn)難以置信！
正文
<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>
如結(jié)果所示，option.age已經(jīng)更新，但是watch中的option函數(shù)并沒有被觸發(fā)。
vue的watch鉤子會(huì)那么雞肋？我是不信的了。
深層watch
...
watch: {
option: {
handler(newVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
},
...
需要深層watch就需要開啟deep屬性
如結(jié)果所示。
另外，你會(huì)發(fā)現(xiàn)，在age沒有變化前也是有打印出option，這是因?yàn)殚_啟immediate屬性，設(shè)定為true，
該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?3中引入了組合式API,它是一種新的代碼組織方式,旨在讓開發(fā)者更靈活地組織和重用Vue組件的邏輯,下面我們就來學(xué)習(xí)一下Vue中常見組合式API的使用吧2023-11-11
vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vite項(xiàng)目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量
這篇文章主要介紹了vite項(xiàng)目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue toRef toRefs toRaw函數(shù)使用示例
這篇文章主要介紹了Vue toRef toRefs toRaw函數(shù)使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
在許多Web應(yīng)用程序中，日歷是一個(gè)常見的組件，它通常用于顯示日期、安排會(huì)議、查看活動(dòng)等，在Vue中，我們可以使用第三方庫來輕松實(shí)現(xiàn)日歷功能，也可以手動(dòng)編寫代碼來實(shí)現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動(dòng)編寫代碼來實(shí)現(xiàn)日歷功能2023-07-07
修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue-cli安裝使用less的教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue使用watch監(jiān)聽器的基本使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10