一、MVVM模式
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。在MVVM架構下，View 和 Model 之間並沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注於View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。
二、生命周期
先來看看vue官網對vue生命周期的介紹
Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。總共分為8個階段如下所示：
beforeCreate----創建前：組件實例被創建時，組件屬性計算之前，數據對象data都為undefined，未初始化。
created----創建后：組件實例創建完成，屬性已經綁定，數據對象data已存在，但dom未生成，$el未存在。
beforeMount---掛載前：vue實例的$el和data都已初始化，掛載之前為虛擬的dom節點，data.message未替換。
mounted-----掛載后：vue實例掛載完成，data.message成功渲染。
beforeUpdate----更新前：當data變化時，會觸發beforeUpdate方法。
updated----更新后：當data變化時，會觸發updated方法。
beforeDestory---銷毀前：組件銷毀之前調用。
destoryed---銷毀后： 組件銷毀之后調用，對data的改變不會再觸發周期函數，vue實例已解除事件監聽和dom綁定，但dom結構依然存在。
實例如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue實例生命周期</title> 6 </head> 7 <body> 8 <div id="app"></div> 9 </body> 10 <script src="../node_modules/vue/dist/vue.js"></script> 11 <script type="text/javascript"> 12 //生命周期函數就是vue實例在某一個時間點會自動執行的函數 13 var vm = new Vue({ 14 el:'#app', 15 template: "<div>{{test}}</div>", 16 data:{ 17 test:"hello world" 18 }, 19 //創建前 20 beforeCreate: function() { 21 console.log("beforeCreate"); 22 }, 23 //創建后 24 created: function() { 25 console.log("created"); 26 }, 27 //掛載前 28 beforeMount: function() { 29 console.log(this.$el); 30 console.log("beforeMount"); 31 }, 32 //掛載后 33 mounted: function() { 34 console.log(this.$el); 35 console.log("mounted"); 36 }, 37 //更新前 38 beforeUpdate: function() { 39 console.log("beforeUpdate"); 40 }, 41 //更新后 42 updated: function() { 43 console.log("updated"); 44 }, 45 //銷毀前 46 beforeDestroy: function() { 47 console.log("beforeDestroy"); 48 }, 49 //銷毀后 50 destroyed: function() { 51 console.log("destroyed"); 52 }, 53 }); 54 </script> 55 </html>
運行效果如下所示：
關於vue生命周期的內容總結就介紹這么多了，看上面的執行效果圖可以完整地看到整個生命周期的全過程。