Vue中的mounted和created有什么區別-創新互聯

創新互聯www.cdcxhl.cn八線動態BGP香港云服務器提供商，新人活動買多久送多久，劃算不套路！

創新互聯堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站制作、成都做網站、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的正安網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

本篇文章給大家分享的是有關Vue中的mounted和created的區別，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

一、什么是Vue？

Vue是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。

二、created和mounted的區別

官方圖解如下:

Vue中的mounted和created有什么區別

我們從圖中看兩個節點：

created:在模板渲染成html前調用，即通常初始化某些屬性值，然后再渲染成視圖。

mounted:在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作。

其實兩者比較好理解，通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完后才可以進行，那么mounted就是不二之選。下面看一個例子（用組件）。

三、例子

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
        created:function(){
            this.name="唐浩益"
            this.age = "12"
            this.city ="杭州"
            var x = document.getElementById("name")//第一個命令臺錯誤
            console.log(x.innerHTML);
        },
        mounted:function(){
            var x = document.getElementById("name")//第二個命令臺輸出的結果
            console.log(x.innerHTML);
        }
    });
    var vm = new Vue({
        el:"#example1"
    })

可以看到輸出如下：

Vue中的mounted和created有什么區別