成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于Vue實例的生命周期created和mounted的區(qū)別

baukh789 / 2912人閱讀

摘要:通俗說就是實例從創(chuàng)建到銷毀的過程,就是生命周期。在這一步,實例已完成以下的配置數(shù)據(jù)觀測,屬性和方法的運算,事件回調(diào)。

關(guān)于作者
程序開發(fā)人員,不拘泥于語言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。

個人網(wǎng)站:http://www.linganmin.cn

最近剛寫了一個手機在線播放的H5電影站:https://ifilm.linganmin.cn

生命周期先上圖

什么是生命周期
Vue實例有一個完整的生命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程,就是生命周期。

在Vue的整個生命周期中,它提供了一系列的事件,可以讓我們在事件觸發(fā)時注冊js方法,可以讓我們用自己注冊的js方法控制整個大局,在這些事件響應(yīng)方法中的this直接指向的是vue的實例。

再上圖,對生命周期圖的標(biāo)注

特別值得注意的是created鉤子函數(shù)和mounted鉤子函數(shù)的區(qū)別
每個鉤子函數(shù)都在啥時間觸發(fā)

beforeCreate

在實例初始化之后,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。

created

實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步,實例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運算, watch/event 事件回調(diào)。然而,掛載階段還沒開始,$el 屬性目前不可見。

beforeMount

在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted

el 被新創(chuàng)建的 vm.$el 替換,并掛載到實例上去之后調(diào)用該鉤子。

beforeUpdate

數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態(tài),這不會觸發(fā)附加的重渲染過程。

updated

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁,在這之后會調(diào)用該鉤子。

當(dāng)這個鉤子被調(diào)用時,組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài),因為這可能會導(dǎo)致更新無限循環(huán)。

該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy

實例銷毀之前調(diào)用。在這一步,實例仍然完全可用。

destroyed

Vue 實例銷毀后調(diào)用。調(diào)用后,Vue 實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。

安小下同學(xué)

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/50519.html

相關(guān)文章

  • 關(guān)于Vue實例生命周期createdmounted區(qū)別

    摘要:通俗說就是實例從創(chuàng)建到銷毀的過程,就是生命周期。在這一步,實例已完成以下的配置數(shù)據(jù)觀測,屬性和方法的運算,事件回調(diào)。 關(guān)于作者 程序開發(fā)人員,不拘泥于語言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。個人網(wǎng)站:http://www.linganmin.cn 最近剛寫了一個手機在線播放的H5電影站:...

    Integ 評論0 收藏0
  • vuecreatedmounted區(qū)別

    摘要:中與的區(qū)別關(guān)于中的生命周期,如果不是有特別的需求,一般在項目開發(fā)過程中更多的使用和,所以在本文中主要講解與在開發(fā)中的主要使用區(qū)別。構(gòu)建樹構(gòu)建規(guī)則樹根據(jù)執(zhí)行順序解析文件。 vue中created與mounted的區(qū)別 關(guān)于vue.js中的生命周期,如果不是有特別的需求,一般在項目開發(fā)過程中更多的使用created和mounted,所以在本文中主要講解created與mounted在開發(fā)中...

    wuaiqiu 評論0 收藏0
  • vuecreatedmounted區(qū)別

    摘要:中與的區(qū)別關(guān)于中的生命周期,如果不是有特別的需求,一般在項目開發(fā)過程中更多的使用和,所以在本文中主要講解與在開發(fā)中的主要使用區(qū)別。構(gòu)建樹構(gòu)建規(guī)則樹根據(jù)執(zhí)行順序解析文件。 vue中created與mounted的區(qū)別 關(guān)于vue.js中的生命周期,如果不是有特別的需求,一般在項目開發(fā)過程中更多的使用created和mounted,所以在本文中主要講解created與mounted在開發(fā)中...

    HackerShell 評論0 收藏0
  • 再談Vue生命周期----結(jié)合Vue源碼

    摘要:中的生命周期函數(shù)也可以稱之為生命周期鉤子函數(shù),在特定的時期,調(diào)用特定的函數(shù)。吊起鉤子函數(shù)調(diào)起鉤子函數(shù)問題為什么是一個數(shù)組卸載組件,會觸發(fā)一個這行代碼之后發(fā)生了什么背后實現(xiàn)原理。 簡介 關(guān)于Vue的生命周期函數(shù),目前網(wǎng)上有許多介紹文章,但也都只是分析了表象。這篇文檔,將結(jié)合Vue源碼分析,為什么會有這樣的表象。 Vue中的生命周期函數(shù)也可以稱之為生命周期鉤子(hook)函數(shù),在特定的時期...

    KavenFan 評論0 收藏0
  • Vue組件定義

    摘要:組件結(jié)構(gòu)基礎(chǔ)知識屬性屬性維護一個組件內(nèi)部狀態(tài),其余組件正常情況下不可見。方案選擇單文件一行的簡單結(jié)構(gòu)常規(guī)的選擇前邊兩種方案解決不了時候的選擇靈活性高注意不論選擇哪一種方案,定義模板時,一定要有一個非標(biāo)簽元素作根,有且僅有一個。 簡介 組件是可復(fù)用的 Vue 實例。 本質(zhì)上是一個對象,該對象包含data、computed、watch、methods、filters以及生命周期鉤子等成員屬...

    imtianx 評論0 收藏0

發(fā)表評論

0條評論

baukh789

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<