說明：本章內(nèi)容是博主的Vue學(xué)習(xí)筆記，以官方文檔為準(zhǔn)。

MVVM模式

MVVM模式，M即 model，數(shù)據(jù)模型；V即 view，視圖；VM即 view-model，視圖模型。

編輯搜圖

理解

首先，數(shù)據(jù)Model通過Data Bindings把數(shù)據(jù)綁定在View視圖上，

當(dāng)View視圖有交互（有改變）的時候，Dom listeners會自動監(jiān)聽，然后更新數(shù)據(jù)Model。

Q：什么是MVVM模式？

A：MVVM模式，第一個M代表數(shù)據(jù)模型，V代表視圖，VM代表視圖模型；
它的實際操作原理是：后臺數(shù)據(jù)通過視圖模型來渲染視圖，就是頁面。當(dāng)用戶在頁面上進行操作的時候，
視圖模型會自動監(jiān)聽到用戶的操作，從而改變后臺數(shù)據(jù)。

實例生命周期鉤子

實例生命周期鉤子API

簡單理解，生命周期鉤子函數(shù)就是vue實例在某一個時間點會自動執(zhí)行的函數(shù)。

<div id="app">{{msg}}</div><script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script>
  var vm = new Vue({    el: '#app',    data: {      msg: 'Vue的生命周期'
    },    beforeCreate: function() {      console.group('------beforeCreate創(chuàng)建前狀態(tài)------');      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //undefined 
      console.log("msg: " + this.msg) //undefined 
    },    created: function() {      console.group('------created創(chuàng)建完畢狀態(tài)------');      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //已被初始化 
      console.log("msg: " + this.msg); //已被初始化
    },    beforeMount: function() {      console.group('------beforeMount掛載前狀態(tài)------');      console.log(this.$el);// <div id="app">{{msg}}</div> 掛載前狀態(tài)
    },    mounted: function() {      console.group('------mounted 掛載結(jié)束狀態(tài)------');      console.log(this.$el);// <div id="app">Vue的生命周期</div>   msg內(nèi)容被掛載并渲染到頁面
    },      // 當(dāng)data被修改之前
    beforeUpdate: function () {      console.group('beforeUpdate 更新前狀態(tài)===============》');      console.log("el     : " + this.$el);      console.log(this.$el);   
      console.log("data   : " + this.$data); 
      console.log("msg: " + this.msg); 
    },      // 觸發(fā)beforeUpdate之后，虛擬DOM重新渲染并應(yīng)用更新
      // 當(dāng)data被修改之后
    updated: function () {      console.group('updated 更新完成狀態(tài)===============》');      console.log("el     : " + this.$el);      console.log(this.$el); 
      console.log("data   : " + this.$data); 
      console.log("msg: " + this.msg); 
    },      // 調(diào)用vm.$destroy() 銷毀前
    beforeDestroy: function () {      console.group('beforeDestroy 銷毀前狀態(tài)===============》');      console.log("el     : " + this.$el);      console.log(this.$el);    
      console.log("data   : " + this.$data); 
      console.log("msg: " + this.msg); 
    },       // 調(diào)用vm.$destroy() 銷毀后
    destroyed: function () {      console.group('destroyed 銷毀完成狀態(tài)===============》');      console.log("el     : " + this.$el);      console.log(this.$el);  
      console.log("data   : " + this.$data); 
      console.log("msg: " + this.msg)
    }
  })</script>

Demo

See the Pen 生命周期鉤子 by xugaoyi (@xugaoyi) on CodePen.

生命周期圖示

編輯搜圖