解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題

發(fā)布時(shí)間：2020-09-29 20:16:44 來(lái)源：腳本之家閱讀：553 作者：HiZhg 欄目：web開(kāi)發(fā)

問(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" >方式一</p>
 <p @click="fun2" >方式二</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è)人推薦使用第二種解決方式，代碼寫起來(lái)更優(yōu)雅。第一種解決方式如果有多個(gè)值會(huì)出現(xiàn)，多行$set()語(yǔ)句。

以上這篇解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

解決Vue2.0 watch對(duì)象屬性變化監(jiān)聽(tīng)不到的問(wèn)題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽