Vue中created與mounted的區(qū)別淺析

更新時(shí)間：2022年06月10日 11:05:58 作者：天行無忌

在使用vue框架的過程中,我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理,這時(shí)候我們常用的就是在created與mounted選項(xiàng)中作出處理,這篇文章主要給大家介紹了關(guān)于Vue中created與mounted區(qū)別的相關(guān)資料,其中部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?需要的朋友可以參考下

大多數(shù)人在談?wù)撋芷阢^子時(shí)會感到困惑的一件事是 created 和 mounted 之間的區(qū)別。有著相似的名稱，覺得應(yīng)該做同樣的事情，但還是有一些細(xì)微的差別。

首先，created() 和 mounted() 都可以訪問原型上的 data 和 props 。例如，下面的代碼中，這兩個(gè)鉤子將在控制臺中打印出 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)文章

Vuex?Action的?{?commit?}的寫法教程
實(shí)踐中，我們會經(jīng)常用到?ES2015?的參數(shù)解構(gòu)來簡化代碼（特別是我們需要調(diào)用commit很多次的時(shí)候，{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方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue.js input框之間賦值方法
今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue動態(tài)組件與內(nèi)置組件淺析講解
閑話少說，我們進(jìn)入今天的小小五分鐘學(xué)習(xí)時(shí)間，前面我們了解了vue的組件，我們本文主要是講解vue的動態(tài)組件和內(nèi)置組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue2.5通過json文件讀取數(shù)據(jù)的方法
本文通過實(shí)例代碼給大家詳細(xì)介紹了Vue2.5通過json文件讀取數(shù)據(jù)的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-02-02
前端Vue3引入高德地圖并展示行駛軌跡動畫的步驟
最近在Vue項(xiàng)目中引入高德地圖,實(shí)現(xiàn)地圖展示與交互的方法和技術(shù),這里跟大家分享下,這篇文章主要給大家介紹了關(guān)于前端Vue3引入高德地圖并展示行駛軌跡動畫的相關(guān)資料,需要的朋友可以參考下
2024-09-09
Vue事件獲取事件對象之event.currentTarget詳解
這篇文章主要介紹了Vue事件獲取事件對象之event.currentTarget,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中vant組件樣式失效問題及解決
這篇文章主要介紹了vue中vant組件樣式失效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue實(shí)現(xiàn)登錄頁背景粒子特效
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄頁背景粒子特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動視圖原理
這篇文章主要介紹了淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動視圖原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02