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

大多數(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ù)這點區(qū)別 created() 非常適合調(diào)用 API，而 mounted() 非常適合在 DOM 元素完全加載后執(zhí)行任何操作。

在 Vue3 組合式API（Composition API）中，created() 和 beforeCreated() 將不再存在，可以取而代之的是 setup()，因此，在 setup() 中 DOM 仍然不可用，而 mounted() 保持不變。

附：vue官網(wǎng)給出的生命周期圖