詳解Vue生命週期和MVVM框架

2022-07-15 22:01:00

生命週期

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

建立階段：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')