在使用 vue.js 和 element-ui 進(jìn)行開(kāi)發(fā)時(shí)，有時(shí)候會(huì)遇到這樣的報(bào)錯(cuò)：TypeError: Cannot read property 'xxx' of undefined，其中 xxx 表示 undefined 屬性的名稱。

這個(gè)錯(cuò)誤的原因很簡(jiǎn)單，就是我們?cè)谠L問(wèn)一個(gè)對(duì)象的屬性時(shí)，這個(gè)對(duì)象并沒(méi)有被實(shí)例化或賦值，因此它的值是 undefined，再訪問(wèn)這個(gè) undefined 值的屬性自然就會(huì)出現(xiàn) TypeError 的錯(cuò)誤。

例如，下面的代碼嘗試訪問(wèn)一個(gè)未被定義的對(duì)象的屬性 $refs：

export default {
mounted() {
this.$refs.xxx.focus()
}
}

當(dāng)該組件的渲染完成后，mounted 生命周期會(huì)被調(diào)用，但是此時(shí) xxx 對(duì)象還沒(méi)有被實(shí)例化或賦值，因此會(huì)產(chǎn)生 undefined 錯(cuò)誤。我們需要先判斷一下這個(gè)對(duì)象是否存在，再進(jìn)行調(diào)用它的屬性或方法，例如：

export default {
mounted() {
if (this.$refs.xxx) {
this.$refs.xxx.focus()
}
}
}

在寫(xiě) vue.js 代碼時(shí)，我們要時(shí)刻注意判斷對(duì)象是否存在，防止出現(xiàn) undefined 錯(cuò)誤。