本篇內(nèi)容介紹了“vue中mounted和created有哪些區(qū)別”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)是專業(yè)的網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì)等網(wǎng)站開發(fā)一體化解決方案;包括H5網(wǎng)站設(shè)計(jì),小程序設(shè)計(jì),網(wǎng)站定制,企業(yè)網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,建網(wǎng)站,PHP網(wǎng)站建設(shè),軟件開發(fā)，軟文發(fā)布平臺(tái)，網(wǎng)站營銷。歡迎做網(wǎng)站的企業(yè)前來合作洽談,成都創(chuàng)新互聯(lián)將竭誠為您服務(wù)!

區(qū)別：1、created在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖；mounted在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。2、created中無法對chart進(jìn)行一些初始化配置，一定要等這個(gè)html渲染完后才可以進(jìn)行；而mounted可以。

一、什么是生命周期？

用通俗的語言來說，就是 Vue中實(shí)例或者組件從創(chuàng)建到消滅中間經(jīng)過的一系列過程。 雖然不太嚴(yán)謹(jǐn)，但是也基本上可以理解。

通過一系列實(shí)踐，現(xiàn)在把所有遇到的問題整理一遍，今天記錄一下created和mounted的區(qū)別：

二、created和mounted區(qū)別？

官方圖解如下:

我們從圖中看兩個(gè)節(jié)點(diǎn)：

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

mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

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

三、例子

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")//第一個(gè)命令臺(tái)錯(cuò)誤
           console.log(x.innerHTML);
       },
       mounted:function(){
           var x = document.getElementById("name")//第二個(gè)命令臺(tái)輸出的結(jié)果
           console.log(x.innerHTML);
       }
   });
   var vm = new Vue({
       el:"#example1"
   })

undefined

可以看到都在created賦予初始值的情況下成功渲染出來了。

但是同時(shí)看console臺(tái)如下：

可以看到第一個(gè)報(bào)了錯(cuò)，實(shí)際是因?yàn)檎也坏絠d，getElementById(ID) 并沒有找到元素，原因如下：

在created的時(shí)候，視圖中的html并沒有渲染出來，所以此時(shí)如果直接去操作html的dom節(jié)點(diǎn)，一定找不到相關(guān)的元素

而在mounted中，由于此時(shí)html已經(jīng)渲染出來了，所以可以直接操作dom節(jié)點(diǎn)，故輸出了結(jié)果“唐浩益”。

“vue中mounted和created有哪些區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁題目：vue中mounted和created有哪些區(qū)別
URL網(wǎng)址：http://chinadenli.net/article20/geosco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、軟件開發(fā)、電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)