快捷導(dǎo)航

vue computed計(jì)算屬性顯示undefined的解決

更新時(shí)間：2023年11月16日 17:19:33 作者：小小菜鳥(niǎo)在加油

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

vue computed計(jì)算屬性顯示undefined

在做三級(jí)聯(lián)動(dòng)菜單頁(yè)面的時(shí)候，之前的幾個(gè)報(bào)錯(cuò)都解決了，終于沒(méi)有報(bào)錯(cuò)了，控制臺(tái)干干凈凈，最后菜單卻沒(méi)顯示出來(lái)，用vue開(kāi)發(fā)者工具一看，三級(jí)聯(lián)動(dòng)的模塊里，計(jì)算屬性顯示undefined。

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

尷尬，原來(lái)是搞各種bug，console來(lái)console去的把計(jì)算屬性的return整沒(méi)了。

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

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

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

nice，我是傘兵。

vue computed 使用避坑

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

<template>
  <section>
    <input type="button" value="查看三個(gè)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 都沒(méi)有觸發(fā)的 computed setter。對(duì)于引用類(lèi)型的計(jì)算屬性，只有 list2=... 這樣修改引用地址，才會(huì)觸發(fā) setter

list2.push()：能成功修改三個(gè)list的值。因?yàn)?list2 和 list1 是相同的引用地址，list2.push 此時(shí)等價(jià)于 list1.push。list1變化后觸發(fā)list3變化
list3.push()：能成功修改自己，但是數(shù)據(jù)變化沒(méi)有觸發(fā)視圖的自動(dòng)更新。是因?yàn)?computed 只是個(gè) Watcher，自身沒(méi)有綁定依賴(lài)，值變化不會(huì)觸發(fā)視圖的更新。所以在頁(yè)面中看不到 list3 變化，只能在彈窗中看到 list3 的變化（因?yàn)閺棿笆敲看吸c(diǎn)擊后當(dāng)場(chǎng)取值的）
又 list2.push：此時(shí)list3 又變回去了

反思

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

計(jì)算屬性自己只是個(gè) Watcher，不是像 props 和 data 那樣的數(shù)據(jù)。所以絕對(duì)不要在計(jì)算屬性上加自定義的屬性，因?yàn)闆](méi)有意義：

1. 它不是對(duì)象，沒(méi)有依賴(lài)關(guān)系。數(shù)據(jù)變化，"依賴(lài)"不會(huì)更新

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

下面的寫(xiě)法一有效，是因?yàn)橐孟嗤喈?dāng)于什么都沒(méi)干就是單純起了個(gè)別名。這種起別名的操作以后少干，因?yàn)檫壿嬌虾懿磺逦?，?fù)雜的工程中出了 bug 不好調(diào)。

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

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