解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題
問(wèn)題
很早之前就遇到一個(gè)問(wèn)題，父組件向子組件傳值，子組件監(jiān)聽(tīng)傳入對(duì)象的某個(gè)屬性。發(fā)現(xiàn)子組件使用deep watch都不能觀察到對(duì)象中屬性的變化，今天終于找到為啥出現(xiàn)這種問(wèn)題和解決辦法了。
解決
為啥出現(xiàn)這種問(wèn)題？受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。
請(qǐng)參照https://v1-cn.vuejs.org/guide/reactivity.html
解決方式：
通過(guò)vue的this.$set(object, key, value)方法
通過(guò)Object.assign()重新創(chuàng)建一個(gè)對(duì)象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
代碼實(shí)例
<template>
<div>
<p @click="fun1" style="color: blue">方式一</p>
<p @click="fun2" style="color: blue">方式二</p>
</div>
</template>
<script>
export default {
data () {
return {
p: {a: 1}
}
},
methods: {
fun1 () {
console.log('click 1111')
// this.p.b = 2 // 通過(guò)點(diǎn)方法賦值，發(fā)現(xiàn)觀察不到p的變化
this.$set(this.p, 'b', 2) // 第一種解決方式，可以查看日志看到已經(jīng)監(jiān)聽(tīng)到了變化
},
fun2 () {
console.log('click 2222')
this.p = Object.assign({}, this.p, {c: 3})
}
},
watch: {
p: {
handler (cval, oval) {
console.log('--------')
console.log(cval, oval)
},
deep: true
}
}
}
</script>
<style>
</style>
總結(jié)
個(gè)人推薦使用第二種解決方式，代碼寫(xiě)起來(lái)更優(yōu)雅。第一種解決方式如果有多個(gè)值會(huì)出現(xiàn)，多行$set()語(yǔ)句。
以上這篇解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了詳細(xì)介紹解決vue和jsp結(jié)合的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了Vue如何引入icon圖標(biāo),本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來(lái)引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來(lái)引入多個(gè)，單個(gè)的文件，下面通過(guò)本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
Vue3源碼分析reactivity實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了Vue3源碼分析reactivity實(shí)現(xiàn)方法原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下2023-08-08
import.meta.glob() 如何導(dǎo)入多個(gè)目錄下的資源(最新推薦)
import.meta.glob() 其實(shí)不僅能接收一個(gè)字符串,還可以接收一個(gè)字符串?dāng)?shù)組,就是匹配多個(gè)位置,本文給大家介紹import.meta.glob() 如何導(dǎo)入多個(gè)目錄下的資源,感興趣的朋友一起看看吧2023-11-11
vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載
這篇文章主要介紹了vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 動(dòng)態(tài)設(shè)置img的src地址無(wú)效,npm run build 后找不到文件的解決
這篇文章主要介紹了vue 動(dòng)態(tài)設(shè)置img的src地址無(wú)效,npm run build 后找不到文件的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng)
這篇文章主要介紹了Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05