Vue.js入門（一）--MVVM框架理解

時間 2019-11-05

標籤 vue.js vue 入門 mvvm 框架理解欄目 JavaScript 简体版

原文原文鏈接

入門VUE

開始在某公司實習，第一個接手的項目是用vue+bootstrap搭建網頁。開始讀官網https://cn.vuejs.org/v2的入門教程和API，有些吃力。想先了解一下此框架大致的內容和原理。javascript

MVC、MVP、MVVM模型原理

參考了阮大大的博客文章http://www.ruanyifeng.com/blo...，總結了下圖：html

總結：這三種模式的區別主要在於中間層，也就是MVC的控制層所起到的做用的差異。
參考博客http://www.cnblogs.com/onepix...，說明了MVC模式不那麼適合前段開發的理由：前端

這種 MVC 架構模式對於簡單的應用來看起是OK 的，也符合軟件架構的分層思想。但實際上，隨着H5 的不斷髮展，人們更但願使用H5開發的應用能和Native媲美，或者接近於原生App的體驗效果，因而前端應用的複雜程度已不一樣往日，今非昔比。這時前端開發就暴露出了三個痛點問題：vue

一、開發者在代碼中大量調用相同的 DOM API, 處理繁瑣，操做冗餘，使得代碼難以維護。java

二、大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。jquery

三、當 Model 頻繁發生變化，開發者須要主動更新到View ；當用戶的操做致使 View 發生變化，開發者一樣須要將變化的數據同步到Model 中，這樣的工做不只繁瑣，並且很難維護複雜多變的數據狀態。bootstrap

其實，早期jquery 的出現就是爲了前端能更簡潔的操做DOM 而設計的，但它只解決了第一個問題，另外兩個問題始終伴隨着前端一直存在。數組

----------架構

MVVM 的出現，完美解決了以上三個問題

MVVM 由 Model,View,ViewModel 三部分構成，Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯；View 表明UI 組件，它負責將數據模型轉化成UI 展示出來，ViewModel 是一個同步View 和 Model的對象。mvc

在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的，所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。

ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

Vue.js與MVVM模型的聯繫

Vue.js 能夠說是MVVM 架構的最佳實踐，專一於 MVVM 中的 ViewModel，不只作到了數據雙向綁定，並且也是一款相對比較輕量級的JS 庫，API 簡潔，很容易上手。Vue的基礎知識網上有現成的教程，此處再也不贅述，下面簡單瞭解一下 Vue.js 關於雙向綁定的一些實現細節：

Vue.js 是採用 Object.defineProperty 的 getter 和 setter，並結合觀察者模式來實現數據綁定的。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

Observer
數據監聽器，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者，內部採用Object.defineProperty的getter和setter來實現。

Compile 指令解析器，它的做用對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。

Watcher 訂閱者，做爲鏈接 Observer 和 Compile
的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數。

Dep 消息訂閱器，內部維護了一個數組，用來收集訂閱者（Watcher），數據變更觸發notify 函數，再調用訂閱者的 update
方法。

我是這樣理解vue框架對應MVVM模型關係的：

Observer至關於Model層觀察vue實例中的data數據，當數據發生變化時，通知Watcher訂閱者。
Compile指令解析器位於View層，初始化View的視圖，將數據變化與更新函數綁定，傳給Watcher訂閱者。
Watcher是整個模型的核心，對應ViewModel層，鏈接Observer和Compile。全部的Watchers存於Dep訂閱器中，Watcher將Observer監聽到的數據變化對應相應的回調函數，處理數據，反饋給View層更新界面視圖。

Vue生命週期圖

實例生命週期

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。例如，實例須要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，而後在數據變化時更新 DOM 。在這個過程當中，實例也會調用一些生命週期鉤子，這就給咱們提供了執行自定義邏輯的機會。例如，created 這個鉤子在實例被建立以後被調用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                },
                created:function(){
                    console.log('實例已經建立,msg變量還未渲染到模板')
                },
                mounted:function(){
                    console.log('已經掛載到模板上:msg變量渲染到模板')  
                },
                updated:function(){
                    console.log('實例更新啦')    
                },
                destroyed:function(){
                    console.log('銷燬啦')  
                }
            });
        }
    </script>
</head>
<body> 
    <div id="box">
        <input type="text" v-model="msg"><br/>
        {{msg}}
    </div>
</body>
</html>

接下來要學習Vue.js中的API，包括全局API、選項、實例屬性、實例方法、指令、特殊屬性、內置組件等。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。