vue computed計算屬性顯示undefined的解決

更新時間：2023年11月16日 17:19:33 作者：小小菜鳥在加油

這篇文章主要介紹了vue computed計算屬性顯示undefined的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue computed計算屬性顯示undefined

在做三級聯(lián)動菜單頁面的時候，之前的幾個報錯都解決了，終于沒有報錯了，控制臺干干凈凈，最后菜單卻沒顯示出來，用vue開發(fā)者工具一看，三級聯(lián)動的模塊里，計算屬性顯示undefined。

在計算屬性里console了一下，數(shù)組什么的都能在控制臺輸出，發(fā)現(xiàn)數(shù)據(jù)明明是傳過來了的，

尷尬，原來是搞各種bug，console來console去的把計算屬性的return整沒了。

computed:{
    ...mapState({
      categoryList:(state)=>{
        // console.log(state.home.categoryList)
        state.home.categoryList
      }
    })
  }

加上return就恢復(fù)了。

computed:{
    ...mapState({
      //state的括號可以去掉，函數(shù)的大括號可以去掉
      categoryList:(state)=>{
        // console.log(state.home.categoryList);
        return state.home.categoryList;
      }
    })
  }

nice，我是傘兵。

vue computed 使用避坑

其實不是 computed 的坑，是我自己沒弄清原理瞎用，導(dǎo)致出現(xiàn)各種問題。。

<template>
  <section>
    <input type="button" value="查看三個list的值" @click="lookOneLook" />
    <div>
      list1：
      <span v-for="(o, index) in list1" :key="'list1' + index">
        {{ o }}
      </span>
    </div>
    <div>
      list2：
      <span v-for="(o, index) in list2" :key="'list2' + index">
        {{ o }}
      </span>
      <input type="button" value="向list2中push" @click="list2.push(5)" />
    </div>
    <div>
      list3：
      <span v-for="(o, index) in list3" :key="'list3' + index">
        {{ o }}
      </span>
      <input type="button" value="向list3中push" @click="list3.push(6)" />
    </div>
  </section>
</template>


<script>
export default {
  computed: {
    list2: {
      get() {
        return this.list1;
      },
      set(val) {
        alert("觸發(fā)list2的setter");
        this.list1 = val;
      },
    },
    list3: {
      get() {
        return this.list1.map((o) => o);
      },
      set(val) {
        alert("觸發(fā)list3的setter");
        this.list1 = val;
      },
    },
  },
  data() {
    return {
      list1: [1, 2, 3, 4],
    };
  },
  methods: {
    lookOneLook() {
      alert(`
      list1 : ${this.list1}
      list2 : ${this.list2}
      list3 : ${this.list3}`);
    },
  },
};
</script>

list2.push 和 list3.push 都沒有觸發(fā)的 computed setter。對于引用類型的計算屬性，只有 list2=... 這樣修改引用地址，才會觸發(fā) setter

list2.push()：能成功修改三個list的值。因為 list2 和 list1 是相同的引用地址，list2.push 此時等價于 list1.push。list1變化后觸發(fā)list3變化
list3.push()：能成功修改自己，但是數(shù)據(jù)變化沒有觸發(fā)視圖的自動更新。是因為 computed 只是個 Watcher，自身沒有綁定依賴，值變化不會觸發(fā)視圖的更新。所以在頁面中看不到 list3 變化，只能在彈窗中看到 list3 的變化（因為彈窗是每次點擊后當(dāng)場取值的）
又 list2.push：此時list3 又變回去了

反思

對于引用類型的計算屬性，只有 list2=… 這樣修改引用地址，才會觸發(fā) setter

計算屬性自己只是個 Watcher，不是像 props 和 data 那樣的數(shù)據(jù)。所以絕對不要在計算屬性上加自定義的屬性，因為沒有意義：

1. 它不是對象，沒有依賴關(guān)系。數(shù)據(jù)變化，"依賴"不會更新

2. computed 內(nèi)部關(guān)聯(lián)的變量一旦變化，computed 的值就會重新計算，你自己添加的屬性的修改就都沒了。

下面的寫法一有效，是因為引用相同，相當(dāng)于什么都沒干就是單純起了個別名。這種起別名的操作以后少干，因為邏輯上很不清晰，復(fù)雜的工程中出了 bug 不好調(diào)。

computed:{
	options:{			
		// 寫法一：test() 有效，是因為 this.options 和 this.userObj.options 是相同引用
		return this.userObj.options;
		/** 寫法二：test() 無效
		return {
			name :this.userObj.options.name
		};*/
	}
}
methods:{
	test(){			
		this.options.name='1';	
	}
}```

computed 本質(zhì)就是一個有 value 的 Watcher，別把它當(dāng)數(shù)據(jù)用?。?！