Vue生命周期和MVVM框架實例分析

這篇文章主要介紹“Vue生命周期和MVVM框架實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue生命周期和MVVM框架實例分析”文章能幫助大家解決問題。

生命周期

組件從開始到結束的全過程

創建階段：beforeCreate、created掛載階段：beforeMount、mounted

更新階段：beforeUpdate、updated

組件從開始到結束的全過程

• 創建階段：beforeCreate、created

• 掛載階段：beforeMount、mounted

• 更新階段：beforeUpdate、updated

• 銷毀階段：beforeDestroy、destroyed

與動態組件有關的兩個特殊的鉤子：

activated(激活)、deactivated(休眠)

與組件異常捕獲有關的一個鉤子：

errorCaptured

生命周期有哪些

• beforeCreate：聲明methods方法，聲明生命周期鉤子

• created：注入provide數據，響應式劫持、把data上數據遍歷后放在this上

• beforeMount：通過el/$mount/template找視圖模板，把template視圖模板編譯成render() (render方法是用于創建虛擬DOM的)

• mounted：創建$el掛載節點，調用render()方法第一次生成虛擬DOM（Vnode是對真實視圖結構的一種數據描述），Vue開始編譯工作，循環遞歸，指令和聲明式變量進行touch，依賴收集、通知Watcher第一次完成DOM渲染

• beforeUpdate：網頁呈現在你的面前上，當各種事件交互觸發data變化時

• updated：再次調用render()方法生成新的虛擬DOM（現在就有了兩個虛擬DOM，執行patch運算（diff運算）找出兩個虛擬DOM之間的最小差異（臟節點集合），通過一個隊列進行異步更新。

• beforeDestroy：當調用$destroy()或路由切換時，即將進入銷毀階段

• destroyed：移除當前組件的Watcher（DOM將無法再更新了），拆卸掉所有的子組件，移除事件監聽器（wacth等等）

const app = new Vue({
      data () {
        return {
          num: 1
        }
      },
      watch: {
        num () {
          console.log('--- num changed')
        }
      },
      // 聲明methods方法
      // 聲明生命周期鉤子
      beforeCreate () {
        console.log('---beforeCreate')
      },
      // 注入provide數據
      // 響應式劫持、把data上數據遍歷后放在this上
      created () {
        console.log('---created')
        // 調接口
      },
      // 通過el/$mount/template找視圖模板
      // 把template視圖模板編譯成render() (render方法是用于創建虛擬DOM的)
      beforeMount () {
        console.log('---beforeMount')
      },
      // 創建$el掛載節點
      // 調用render()方法第一次生成虛擬DOM（Vnode是對真實視圖結構的一種數據描述）
      // Vue開始編譯工作，循環遞歸，指令和聲明式變量進行touch，依賴收集、通知Watcher第一次完成DOM渲染
      mounted () {
        console.log('---mounted')
        // 調接口、開定時器、建立websocket長連接、echarts圖表實例化、DOM/BOM操作。。。
      },
      // 網頁呈現你的面前上，當各種事件交互觸發data變化時
      beforeUpdate () {
        console.log('---beforeUpdate')
      },
      // 再次調用render()方法生成新的虛擬DOM（現在就有了兩個虛擬DOM）
      // 執行patch運算（diff運算）找出兩個虛擬DOM之間的最小差異（臟節點集合），通過一個隊列進行異步更新。
      updated () {
        console.log('---updated')
        // updated在某些場景下，可以模擬出watch/$nextTick()的功能。
      },
      // 當調用$destroy()或路由切換時，即將進入銷毀階段
      beforeDestroy () {
        console.log('---beforeDestroy')
        // 清除定時器、清除緩存
      },
      // 移除當前組件的Watcher（DOM將無法再更新了）
      // 拆卸掉所有的子組件
      // 移除事件監聽器（wacth等等）
      destroyed () {
        console.log('---destroyed')
      },
      methods: {
        add () {
          console.log('---add')
          this.num++
        }
      }
    })
    app.$mount('#app')

app.$mount('#app')和el:'#app'都是掛載到真實DOM中。

什么是虛擬DOM

是一個很大的JSON數據，用于描述視圖模板的，保存在內存中。

虛擬DOM存在的價值點

更新，把DOM更新粒度降到最低，規避人為DOM濫操作。

什么是diff運算

在更新階段，patch對新舊虛擬DOM進行對比，找出臟節點，提交更新。

什么是MVVM框架

MVVM流程 : M數據層 -> VM虛擬DOM層 -> V視圖層

網頁本質 = M數據層 + V視圖結構

關于“Vue生命周期和MVVM框架實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。