vue的MVVM模式和生命週期總結（一）

時間 2019-12-02

標籤 vue mvvm 模式生命週期總結简体版

原文原文鏈接

1、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 上。
javascript

　　Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專一於View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責鏈接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。html

2、生命週期

　　先來看看vue官網對vue生命週期的介紹前端

　　Vue實例有一個完整的生命週期，也就是從開始建立、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、銷燬等一系列過程，咱們稱這是Vue的生命週期。通俗說就是Vue實例從建立到銷燬的過程，就是生命週期。總共分爲8個階段以下所示：vue

　　beforeCreate----建立前：組件實例被建立時，組件屬性計算以前，數據對象data都爲undefined，未初始化。java

　　created----建立後：組件實例建立完成，屬性已經綁定，數據對象data已存在，但dom未生成，$el未存在。node

　　beforeMount---掛載前：vue實例的$el和data都已初始化，掛載以前爲虛擬的dom節點，data.message未替換。架構

　　mounted-----掛載後：vue實例掛載完成，data.message成功渲染。app

　　beforeUpdate----更新前：當data變化時，會觸發beforeUpdate方法。dom

　　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>