MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

生命周期

組件從開始到結(jié)束的全過程

創(chuàng)建階段：beforeCreate、created掛載階段：beforeMount、mounted

更新階段：beforeUpdate、updated

組件從開始到結(jié)束的全過程

創(chuàng)建階段：beforeCreate、created
掛載階段：beforeMount、mounted
更新階段：beforeUpdate、updated
銷毀階段：beforeDestroy、destroyed

與動(dòng)態(tài)組件有關(guān)的兩個(gè)特殊的鉤子：

activated(激活)、deactivated(休眠)

與組件異常捕獲有關(guān)的一個(gè)鉤子：

errorCaptured

生命周期有哪些

beforeCreate：聲明methods方法，聲明生命周期鉤子
created：注入provide數(shù)據(jù)，響應(yīng)式劫持、把data上數(shù)據(jù)遍歷后放在this上
beforeMount：通過el/$mount/template找視圖模板，把template視圖模板編譯成render() (render方法是用于創(chuàng)建虛擬DOM的)
mounted：創(chuàng)建$el掛載節(jié)點(diǎn)，調(diào)用render()方法第一次生成虛擬DOM（Vnode是對(duì)真實(shí)視圖結(jié)構(gòu)的一種數(shù)據(jù)描述），Vue開始編譯工作，循環(huán)遞歸，指令和聲明式變量進(jìn)行touch，依賴收集、通知Watcher第一次完成DOM渲染
beforeUpdate：網(wǎng)頁呈現(xiàn)在你的面前上，當(dāng)各種事件交互觸發(fā)data變化時(shí)
updated：再次調(diào)用render()方法生成新的虛擬DOM（現(xiàn)在就有了兩個(gè)虛擬DOM，執(zhí)行patch運(yùn)算（diff運(yùn)算）找出兩個(gè)虛擬DOM之間的最小差異（臟節(jié)點(diǎn)集合），通過一個(gè)隊(duì)列進(jìn)行異步更新。
beforeDestroy：當(dāng)調(diào)用$destroy()或路由切換時(shí)，即將進(jìn)入銷毀階段
destroyed：移除當(dāng)前組件的Watcher（DOM將無法再更新了），拆卸掉所有的子組件，移除事件監(jiān)聽器（wacth等等）

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