Vue底層實現(xiàn)原理總結

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:19:26

Vue底層實現(xiàn)原理總結

Vue底層實現(xiàn)原理總結:前言最近在研究剖析Vue原理&實現(xiàn)雙向綁定MVVM 這篇文章，一邊學習一邊總結一下自己的思考。 Vue是一個典型的MVVM框架，模型（Model）只是普通的JavaScript對象，修改它則視圖（View）會自動更新。這種設計讓狀態(tài)管理變得非常簡單而直觀。那么Vue是如何

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue底層實現(xiàn)原理總結:前言最近在研究剖析Vue原理&實現(xiàn)雙向綁定MVVM 這篇文章，一邊學習一邊總結一下自己的思考。 Vue是一個典型的MVVM框架，模型（Model）只是普通的JavaScript對象，修改它則視圖（View）會自動更新。這種設計讓狀態(tài)管理變得非常簡單而直觀。那么Vue是如何

前言

最近在研究剖析Vue原理&實現(xiàn)雙向綁定MVVM 這篇文章，一邊學習一邊總結一下自己的思考。

Vue是一個典型的MVVM框架，模型（Model）只是普通的JavaScript對象，修改它則視圖（View）會自動更新。這種設計讓狀態(tài)管理變得非常簡單而直觀。那么Vue是如何把模型和視圖建立起關聯(lián)的呢？

實現(xiàn)原理概述

這是前言提到的文章里的代碼，一段典型的體現(xiàn)了Vue特點的代碼：

<div id="mvvm-app">
 <input type="text" v-model="word">
 <p>{{word}}</p>
 <button v-on:click="sayHi">change model</button> //點擊這個button，word的值會發(fā)生改變
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
 var vm = new MVVM({
 el: '#mvvm-app',
 data: {
 word: 'Hello World!'
 },
 methods: {
 sayHi: function() {
 this.word = 'Hi, everybody!';
 }
 }
 });
</script>

ue實現(xiàn)這種數(shù)據(jù)雙向綁定的效果，需要三大模塊：

Observer：能夠對數(shù)據(jù)對象的所有屬性進行監(jiān)聽，如有變動可拿到最新值并通知訂閱者

Compile：對每個元素節(jié)點的指令進行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應的更新函數(shù)

Watcher：作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執(zhí)行指令綁定的相應回調函數(shù)，從而更新視圖

Observer

Observer的核心是通過Obeject.defineProperty()來監(jiān)聽數(shù)據(jù)的變動，這個函數(shù)內部可以定義setter和getter，每當數(shù)據(jù)發(fā)生變化，就會觸發(fā)setter。這時候Observer就要通知訂閱者，訂閱者就是Watcher。