解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題

更新時間：2018年09月11日 10:03:30 作者：HiZhg

今天小編就為大家分享一篇解決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) // 第一種解決方式，可以查看日志看到已經監(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>

總結

個人推薦使用第二種解決方式，代碼寫起來更優(yōu)雅。第一種解決方式如果有多個值會出現(xiàn)，多行$set()語句。

以上這篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

詳解Vue.js v-for不支持IE9的解決方法
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
詳細介紹解決vue和jsp結合的方法
這篇文章主要介紹了詳細介紹解決vue和jsp結合的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
Vue項目中如何引入icon圖標
這篇文章主要介紹了Vue如何引入icon圖標,本文通過圖文并茂的形式給大家介紹的非常詳細，需要的朋友可以參考下
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
Vue引用echarts超詳細步驟(附圖文)
這篇文章主要給大家介紹了關于Vue引用echarts超詳細步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下
2023-08-08
import.meta.glob() 如何導入多個目錄下的資源(最新推薦)
import.meta.glob() 其實不僅能接收一個字符串,還可以接收一個字符串數(shù)組,就是匹配多個位置,本文給大家介紹import.meta.glob() 如何導入多個目錄下的資源,感興趣的朋友一起看看吧
2023-11-11
vue如何實現(xiàn)el-select下拉選項的懶加載
這篇文章主要介紹了vue如何實現(xiàn)el-select下拉選項的懶加載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue 動態(tài)設置img的src地址無效,npm run build 后找不到文件的解決
這篇文章主要介紹了vue 動態(tài)設置img的src地址無效,npm run build 后找不到文件的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue CLI3創(chuàng)建項目部署到Tomcat 使用ngrok映射到外網
這篇文章主要介紹了Vue CLI3創(chuàng)建項目部署到Tomcat 使用ngrok映射到外網,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05