Vue中created與mounted的區(qū)別淺析
大多數(shù)人在談?wù)撋芷阢^子時會感到困惑的一件事是 created 和 mounted 之間的區(qū)別。有著相似的名稱，覺得應(yīng)該做同樣的事情，但還是有一些細(xì)微的差別。
首先，created() 和 mounted() 都可以訪問原型上的 data 和 props 。例如，下面的代碼中，這兩個鉤子將在控制臺中打印出 My Data 和 My Props ：
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
dataMsg: "My data",
};
},
props: {
propMsg: {
type: String,
default: "My Props",
},
},
created() {
console.log(this.dataMsg);
console.log(this.propMsg);
},
mounted() {
console.log(this.dataMsg);
console.log(this.propMsg);
},
};
</script>created() 和 mounted() 之間的根本區(qū)別在于訪問DOM，在上面的示例中，如果嘗試引用 this.$el，在 created() 中返回 null，在 mounted() 中返回 DOM 元素：
export default {
created() {
// 打印 null
console.log(this.$el);
},
mounted() {
// 打印 DOM 元素
console.log(this.$el);
},
};因此，任何 DOM 操作，甚至使用諸如 querySelector 之類的方法獲取 DOM 元素結(jié)構(gòu)將無法在 created() 中使用。因此根據(jù)這點(diǎn)區(qū)別 created() 非常適合調(diào)用 API，而 mounted() 非常適合在 DOM 元素完全加載后執(zhí)行任何操作。
在 Vue3 組合式API（Composition API）中，created() 和 beforeCreated() 將不再存在，可以取而代之的是 setup()，因此，在 setup() 中 DOM 仍然不可用，而 mounted() 保持不變。
附：vue官網(wǎng)給出的生命周期圖
總結(jié)
到此這篇關(guān)于Vue中created與mounted區(qū)別的文章就介紹到這了,更多相關(guān)Vue created與mounted區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
實踐中，我們會經(jīng)常用到?ES2015?的參數(shù)解構(gòu)來簡化代碼（特別是我們需要調(diào)用commit很多次的時候，{commit}?寫法是解構(gòu)后得到的，這篇文章主要介紹了Vuex?Action的{?commit?}的寫法,需要的朋友可以參考下2023-10-10
vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
閑話少說，我們進(jìn)入今天的小小五分鐘學(xué)習(xí)時間，前面我們了解了vue的組件，我們本文主要是講解vue的動態(tài)組件和內(nèi)置組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue2.5通過json文件讀取數(shù)據(jù)的方法
本文通過實例代碼給大家詳細(xì)介紹了Vue2.5通過json文件讀取數(shù)據(jù)的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02
最近在Vue項目中引入高德地圖,實現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動畫的相關(guān)資料,需要的朋友可以參考下2024-09-09
Vue事件獲取事件對象之event.currentTarget詳解
這篇文章主要介紹了Vue事件獲取事件對象之event.currentTarget,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)登錄頁背景粒子特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
淺談vuejs實現(xiàn)數(shù)據(jù)驅(qū)動視圖原理
這篇文章主要介紹了淺談vuejs實現(xiàn)數(shù)據(jù)驅(qū)動視圖原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02