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