Vue數據雙向綁定原理

先看效果圖

//代碼：
<div id="app">
    <input v-model="name" type="text">
    <h1>{{name}}</h1>
</div>
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/index.js"></script>
<script>
const vm = new Mvue({
    el: "#app",
    data: {
        name: "我是摩登"
    }
});
</script>

在說到數據的雙線綁定前先熟悉下MVVM

什么是MVVM

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表數據模型，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。

在 MVVM 架構下，View 和 Model 之間並沒有直接的聯系，而是通過 ViewModel 進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此 View 數據的變化會同步到 Model 中，而 Model 數據的變化也會立即反應到 View 上。

ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而 View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作 DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。

分析

我們都知道MVVM模式在於數據和視圖層的同步,也就是說當視圖層發生變化時數據也將發生變化.當數據發生變化時視圖也會發生改變

視圖成發生變化時我們可以通過事件監聽即可

數據發生改變通知視圖成方法

正題來了

當我們數據方式改變時我們可以通過 Object.defineProperty 自動觸發set函數從而能夠通知我們跟新視圖.

數據雙向綁定的原理

結合上面的分析我們可以得出Vue數據雙向綁定是通過數據劫持結合* 發布訂閱者模式 類實現的,我們也知道 * 數據劫持 * 是通過Object.defineProperty 方法,當我們知道這些后我們就需要一個監聽器 Observer 來監聽屬性的變化,得知屬性的變化后我們就需要一個Watcher 訂閱者來更新視圖,然后我們還需要一個compile 指令解析器,原來解析我們的節點元素的 指令 * 和 * 初始化視圖 *

Observer 監聽器：用來監聽屬性的變化通知訂閱者
Watcher 訂閱者：收到屬性的變化，然后更新視圖
Compile 解析器：解析指令，初始化模版，綁定訂閱者