vue中的created(生命周期函數)是在組件實例創建之后被調用,即實例創建完成后立即執行。此時,組件DOM節點尚未渲染到頁面中。在該函數中進行一些初始化操作,如獲取數據,初始化狀態等。
然而,當我們在使用vue的created函數時,有時會遇到一些報錯。常見的錯誤有兩種:TypeError和ReferenceError。
TypeError: Cannot read property 'xxx' of undefined ReferenceError: xxx is not defined
前者的錯誤提示是對象的某個屬性為undefined,而我們又嘗試去訪問這個屬性,所以導致了錯誤。通常這種錯誤是由于在created函數中調用某個方法或屬性時,該屬性或方法尚未被定義造成的。
created(){ this.getData() }, methods: { getData() { console.log(this.myData) // 導致TypeError } }
上面的代碼中,當this.getData()被調用時,創建的實例this.myData屬性還沒有被定義。可以使用mounted函數代替created來解決這個問題,因為mounted函數是在DOM渲染完成后執行的。
mounted (){ this.getData() }, methods: { getData() { console.log(this.myData) // 不再報錯 } }
后者的錯誤提示是未定義的變量或函數,在created函數中無法訪問到該變量或函數。這種錯誤通常是由于所引用的變量或函數尚未被導入或定義所導致的。
created(){ console.log(foo) // 導致ReferenceError }
上面的代碼中,變量foo被嘗試訪問,但是它并未被定義或導入。可以在函數內部進行定義或導入,以解決這個問題。
created(){ const foo = 123 // 定義變量 console.log(foo) // 不再報錯 }
綜上所述,當我們在使用vue的created函數時,需要注意變量或函數的定義和導入問題,以及在created函數中嘗試訪問屬性或方法時,對象是否已經定義或初始化。