vue中v-model和響應式的實現(xiàn)原理解析

更新時間：2022年03月18日 15:52:44 作者：前端碎碎念

這篇文章主要介紹了vue中v-model和響應式的實現(xiàn)原理,通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

v-model

首先要了解v-model就是vue幫我們封裝的語法糖，真正實現(xiàn)靠的還是：
v-bind:綁定響應式數(shù)據(jù) 觸發(fā) input 事件并傳遞數(shù)據(jù)

例如下面示例：

<template>
	// 這兩種寫法等價
	<input v-bind:name="name" v-on:input="name=$event.target.value"/>
	<input v-model="name"/>
</template>

1、使用v-model經(jīng)典例子

textarea 元素
select 下拉框
input type='radio' 單選框
input type='checkbox' 多選框

2、使用v-model的副作用

綁定的響應式對象某個不存在的屬性，那么vue會悄悄增加這個屬性，并設置為響應式

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: 'xxx',
      }
    }
  }
}

3、自己開發(fā)的組件如何支持v-model

model屬性的默認值為

// 默認的 model 屬性
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  data() {...},
  methods: {...},
}

響應式實現(xiàn)

簡單一句話理解就是：通過重寫數(shù)據(jù)的get和set屬性方法，讓數(shù)據(jù)在被渲染時通過get屬性方法把所有用到自己的觀察者watcher放入自己的觀察者列表subs中，當數(shù)據(jù)發(fā)生變化之后，通過set屬性方法將該變化通知給所有的觀察者watcher，達到重新渲染。

使用觀察者模式
底層使用Object.defineProperty()，給所有的數(shù)據(jù)都添加getter和setter方法
主要涉及到三個函數(shù)：
Dep：被觀察者類，每個data都有一個Dep實例對象，用于Observer的data觸發(fā)getter時執(zhí)行
dep.depend收集依賴的watcher
Watcher：觀察者類，依賴收集以后Watcher對象會被保存在Dep的subs中，數(shù)據(jù)變動的時候Dep會通知Watcher實例，然后由Watcher實例回調cb進行視圖的更新。
Observer：將普通數(shù)據(jù)轉化為響應式數(shù)據(jù)

實現(xiàn)響應式的主要流程：

1、Observer類的構造方法

給當前的數(shù)據(jù)對象新建一個訂閱器Dep
遍歷對象的 key 調用 defineReactive 方法（實際綁定getter和setter的地方。get 方法是對依賴進行收集， set 方法是當數(shù)據(jù)改變時通知 Watcher 派發(fā)更新）

2、收集依賴
視圖被渲染時，觸發(fā)get屬性方法，調用dep的一個方法dep.depend進行依賴收集

Watcher類：依賴就是watcher的實例
Dep類：存放依賴的位置，通過Dep.subs[]進行管理依賴

舉個??
當前正在渲染componentA時，組件用到了數(shù)據(jù) data () { return { a: b + 1} }，那么此時就會觸發(fā)b的get屬性方法，將當前的watcher添加到b的訂閱者列表subs中

3、派發(fā)更新
修改data屬性上的某一個值時，會它的觸發(fā)set屬性方法，根據(jù)自身的dep.notify（subs保存著所有的觀察者，在 notify 方法中首先對 subs 這個觀察者列表按照其 id 進行了排序）開始派發(fā)更新

為什么要進行排序？

組件的更新由父到子；因為父組件的創(chuàng)建過程是先于子的，所以 watcher 的創(chuàng)建也是先父后子，執(zhí)行順序也應該保持先父后子。
用戶的自定義 watcher 要優(yōu)先于渲染 watcher 執(zhí)行；因為用戶自定義 watcher 是在渲染 watcher 之前創(chuàng)建的。
如果一個組件在父組件的 watcher 執(zhí)行期間被銷毀，那么它對應的 watcher 執(zhí)行都可以被跳過，所以父組件的 watcher 應該先執(zhí)行。

排序結束以后，會對這個隊列進行遍歷，執(zhí)行watcher.run()方法實現(xiàn)數(shù)據(jù)更新通知

run的邏輯是：