溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在研究 剖析Vue原理&實現雙向綁定MVVM 這篇文章，一邊學習一邊總結一下自己的思考。
Vue是一個典型的MVVM框架，模型（Model）只是普通的JavaScript對象，修改它則視圖（View）會自動更新。這種設計讓狀態管理變得非常簡單而直觀。那么Vue是如何把模型和視圖建立起關聯的呢？
這是前言提到的文章里的代碼，一段典型的體現了Vue特點的代碼：
<div id="mvvm-app">
<input type="text" v-model="word">
<p>{{word}}</p>
<button v-on:click="sayHi">change model</button> //點擊這個button，word的值會發生改變
</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實現這種數據雙向綁定的效果，需要三大模塊：
Observer：能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值并通知訂閱者
Compile：對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
Watcher：作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
Observer的核心是通過Obeject.defineProperty()來監聽數據的變動，這個函數內部可以定義setter和getter，每當數據發生變化，就會觸發setter。這時候Observer就要通知訂閱者，訂閱者就是Watcher。
Watcher訂閱者作為Observer和Compile之間通信的橋梁，主要做的事情是：
Compile主要做的事情是解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖。
以上就是本次整理關于Vue底層實現原理的全部知識內容，如果大家還有任何不明白的地方可以在下方的留言區討論。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
