2.2 Vue實(shí)例介紹

Vue應(yīng)用的開發(fā)離不開Vue實(shí)例，下面筆者將創(chuàng)建一個簡單的Vue實(shí)例并觀察實(shí)例從創(chuàng)建到銷毀的完整生命周期。

2.2.1 簡單實(shí)例

一個簡單的Vue實(shí)例，代碼如下：

     <div id="app">
       <h1>{{ title }}</h1>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></
     script>
     <script type="text/javascript">
       var vm = new Vue({
         el: '#app', // 綁定（mount）到DOM上
         data () {
            return {
              title: 'Hello World'
            }
         }
       })
     </script>

在這個實(shí)例中，筆者初始化了帶有title數(shù)據(jù)的vm對象，并將其綁定到id為app的DOM節(jié)點(diǎn)上。

初始化時，在實(shí)例上綁定的常規(guī)數(shù)據(jù)對象會被Vue轉(zhuǎn)化為被觀察的擁有可響應(yīng)行為的對象。簡單地說，就是當(dāng)數(shù)據(jù)發(fā)生變化時，會同步更新其數(shù)據(jù)鏈和作用域中所有的相關(guān)狀態(tài)。最常見的情況就是，當(dāng)實(shí)例數(shù)據(jù)發(fā)生變化時，視圖也隨之改變，如圖2.6所示。

2.2.2 生命周期

Vue實(shí)例在初始化時需要經(jīng)歷一系列過程，比如編譯模板、渲染虛擬DOM樹、將實(shí)例掛載到DOM上、設(shè)置數(shù)據(jù)監(jiān)聽和數(shù)據(jù)綁定等。在這些過程中也會運(yùn)行一些鉤子函數(shù)，允許開發(fā)者在不同的階段注入自己的代碼。

下面，筆者將上一小節(jié)中的簡單實(shí)例稍微改造一下，為其綁定鉤子函數(shù)并打印標(biāo)識信息，用以觀察這些鉤子函數(shù)執(zhí)行的時機(jī)。

改造后的實(shí)例代碼如下（關(guān)于Vue的語法，筆者將在之后的章節(jié)中詳細(xì)講解）：

     <div id="app">
       <h1>{{ title }}</h1>
       <button @click="randomTitle()">改變title</button>
       <button @click="destoryVm()">銷毀實(shí)例</button>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.
     js"></script>
     <script type="text/javascript">
       var vm = new Vue({
         el: '#app',   // mount到DOM上
         data () {
            return {
              title: 'Hello World'
            }
         },
         methods: {
            randomTitle () {
               this.title = 'Hello ' + ['China', 'World', 'Universe'][Math.
     floor(Math.random() * 2.999)]
            },
            destoryVm () {
              this.$destroy()
            }
         },
         // 實(shí)例初始化之后，數(shù)據(jù)觀測和事件綁定之前
         beforeCreate () {
            console.log('before create')
         },
         // 實(shí)例初始化完成，掛載尚未開始時
         created () {
            console.log('created')
         },
         // 掛載之前，render函數(shù)首次被調(diào)用時
         beforeMount () {
            console.log('before mount')
         },
         // 在實(shí)例掛載到DOM節(jié)點(diǎn)上之后
         mounted () {
            console.log('mounted')
         },
         // 數(shù)據(jù)更新時，在虛擬DOM狀態(tài)變化之前
         beforeUpdate () {
            console.log('before update')
         },
         // 虛擬DOM被重新渲染之后
         updated () {
            console.log('updated')
         },
         // 實(shí)例銷毀之前，此時實(shí)例依然可用
         beforeDestroy () {
            console.log('before destroy')
         },
         // 實(shí)例銷毀后，此時Vue實(shí)例及其子實(shí)例將完全解綁
         destroyed () {
            console.log('destroyed')
         }
       })
     </script>

剛打開頁面，即Vue實(shí)例剛被創(chuàng)建并掛載到DOM上時，調(diào)用的鉤子函數(shù)如圖2.7所示。

當(dāng)實(shí)例數(shù)據(jù)發(fā)生變化并觸發(fā)視圖更新時，調(diào)用的鉤子函數(shù)如圖2.8所示。

當(dāng)實(shí)例被銷毀時，調(diào)用的鉤子函數(shù)如圖2.9所示。

之后，多次點(diǎn)擊“改變title”按鈕，視圖不再響應(yīng)數(shù)據(jù)變化，如圖2.10所示，因?yàn)榇藭r節(jié)點(diǎn)上綁定的Vue實(shí)例已被銷毀。

筆者參照官方譯制了一份包含核心概念的生命周期圖，如圖2.11所示。現(xiàn)階段，同學(xué)們只需要對此稍微了解即可，并不需要深入研究，這些并不影響你成為一名優(yōu)秀的Vue開發(fā)者。本節(jié)的意圖也只在于描述這樣一個周期流程及于何時何處去使用這些鉤子函數(shù)，對實(shí)現(xiàn)機(jī)制感興趣的同學(xué)可以深入框架源碼研究并歡迎隨時通過郵件與筆者交流。

隨著實(shí)戰(zhàn)經(jīng)驗(yàn)的不斷累積，這張圖或?qū)W(xué)習(xí)和開發(fā)產(chǎn)生更高的參考價值。