vue 快速入門 系列 —— 偵測數據的變化 - [基本實現]

時間  2021-04-03
標籤 javascript html vue java react es6 npm 數組 app 測試 欄目 JavaScript 简体版
原文   原文鏈接

其餘章節請看：javascript

vue 快速入門 系列html

偵測數據的變化 - [基本實現]

在 初步認識 vue 這篇文章的 hello-world 示例中，咱們經過修改數據（app.seen = false），頁面中的一行文本（如今你看到我了）就不見了。vue

這裏涉及到 Vue 一個重要特性：響應式系統。數據模型只是普通的 JavaScript 對象，當咱們修改時，視圖會被更新。而變化偵測是響應式系統的核心。java

Object的變化偵測

下面咱們就來模擬偵測數據變化的邏輯。react

強調一下咱們要作的事情：數據變化，通知到外界（外界再作一些本身的邏輯處理，好比從新渲染視圖）。es6

開始編碼以前，咱們首先得回答如下幾個問題：npm

  1. 如何偵測對象的變化？
    • 使用 Object.defineProperty()。讀數據的時候會觸發 getter，修改數據會觸發 setter。
    • 只有能偵測對象的變化，才能在數據發生變化的時候發出通知
  2. 當數據發生變化的時候，咱們通知誰？
    • 通知用到數據的地方。而數據能夠用在模板中，也能夠用在 vm.$watch() 中，地方不一樣，行爲也不相同，好比這裏要渲染模板，那裏要進行其餘邏輯。因此乾脆抽象出一個類。當數據變化的時候通知它，再由它去通知其餘地方。
    • 這個類起名叫 Watcher。就是一箇中介。
  3. 依賴誰？
    • 通知誰，就依賴誰，依賴 Watcher。
  4. 什麼時候通知？
    • 修改數據的時候。也就是 setter 中通知
  5. 什麼時候收集依賴？
    • 由於要通知用數據的地方。用數據就得讀數據，咱們就能夠在讀數據的時候收集，也就是在 getter 中收集
  6. 收集到哪裏？
    • 能夠在每一個屬性裏面定義一個數組，與該屬性有關的依賴都放裏面

編碼以下（可直接運行）：數組

// 全局變量，用於存儲依賴
let globalData = undefined;

// 將數據轉爲響應式
function defineReactive (obj,key,val) {
    // 依賴列表
    let dependList = []
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        // 收集依賴（Watcher）
        globalData && dependList.push(globalData)
        return val
      },
      set: function reactiveSetter (newVal) {
        if(val === newVal){
            return
        }
        // 通知依賴項（Watcher）
        dependList.forEach(w => {
            w.update(newVal, val)
        })
        val = newVal
      }
    });
}

// 依賴
class Watcher{
    constructor(data, key, callback){
        this.data = data;
        this.key = key;
        this.callback = callback;
        this.val = this.get();
    }
    // 這段代碼能夠將本身添加到依賴列表中
    get(){
        // 將依賴保存在 globalData
        globalData = this;
        // 讀數據的時候收集依賴
        let value = this.data[this.key]
        globalData = undefined
        return value;
    }
    // 數據改變時收到通知，而後再通知到外界
    update(newVal, oldVal){
        this.callback(newVal, oldVal)
    }
}

/* 如下是測試代碼 */
let data = {};
// 將 name 屬性轉爲響應式
defineReactive(data, 'age', '88')
// 當數據 age 改變時，會通知到 Watcher，再由 Watcher 通知到外界
new Watcher(data, 'age', (newVal, oldVal) => {
    console.log(`外界：newVal = ${newVal} ; oldVal = ${oldVal}`)
})

data.age -= 1 // 控制檯輸出： 外界：newVal = 87 ; oldVal = 88

在控制檯下繼續執行 data.age -= 1，則會輸出 外界：newVal = 86 ; oldVal = 87。app

附上一張 Data、defineReactive、dependList、Watcher和外界的關係圖。測試

首先經過 defineReactive() 方法將 data 轉爲響應式（defineReactive(data, 'age', '88')）。

外界經過 Watcher 讀取數據（let value = this.data[this.key]），數據的 getter 則會被觸發，因而經過 globalData 收集Watcher。

當數據被修改（data.age -= 1）, 會觸發 setter，會通知依賴（dependList），依賴則會通知 Watcher（w.update(newVal, val)），最後 Watcher 再通知給外界。

關於 Object 的問題

思考一下：上面的例子，繼續執行 delete data.age 會通知到外界嗎？

不會。由於不會觸發 setter。請接着看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <section>
            {{ p1.name }}
            {{ p1.age }}
        </section>
    </div>
<script>
const app = new Vue({
    el: '#app',
    data: {
        p1: {
            name: 'ph',
            age: 18
        }
    }
})
</script>
</body>
</html>

運行後，頁面會顯示 ph 18。咱們知道更改數據，視圖會從新渲染，因而在控制檯執行 delete app.p1.name，發現頁面沒有變化。這與上面示例中執行 delete data.age 同樣，都不會觸發setter，也就不會通知到外界。

爲了解決這個問題，Vue提供了兩個 API（稍後將介紹它們）：vm.$set 和 vm.$delete。

若是你繼續執行 app.$delete(app.p1, 'age')，你會發現頁面沒有任何信息了（name 屬性已經用 delete 刪除了，只是當時沒有從新渲染而已）。

注：若是這裏執行 app.p1.sex = 'man'，用到數據 p1 的地方也不會被通知到，這個問題能夠經過 vm.$set 解決。

Array 的變化偵測

背景

假如數據是 let data = {a:1, b:[11, 22]}，經過 Object.defineProperty 將其轉爲響應式以後，咱們修改數據 data.a = 2，會通知到外界，這個好理解；同理 data.b = [11, 22, 33] 也會通知到外界，但若是換一種方式修改數據 b，就像這樣 data.b.push(33)，是不會通知到外界的，由於沒走 setter。請看示例：

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        console.log(`get val = ${val}`)
        return val
      },
      set: function reactiveSetter (newVal) {
        if(val === newVal){
            return
        }
        console.log(`set val = ${newVal}; oldVal = ${val}`)
        val = newVal
      }
    });
}

// 如下是測試代碼 {1}
let data = {}
defineReactive(data, 'a', [11,22])
data.a.push(33)     // get val = 11,22               （沒有觸發 setter）    {2}     
data.a              // get val = 11,22,33 
data.a = 1          // set val = 1; oldVal = 11,22,33（觸發 setter）

經過 push() 方法改變數組的值，確實沒有觸發 setter（行{2}），也就不能通知外界。這裏好像說明了一個問題：經過 Object.definePropery() 方法，只能將對象轉爲響應式，不能將數組轉爲響應式。

其實 Object.definePropery() 能夠將數組轉爲響應式。請看示例：

// 繼續上面的例子，將測試代碼（行{1}）改成：
let data = []
defineReactive(data, '0', 11)
data[0] = 22    // set val = 22; oldVal = 11
data.push(33)   // 不會觸發                     {10}

雖然 Object.definePropery() 能夠將數組轉爲響應式，但經過 data.push(33)（行{10}）這種方式修改數組，仍然不會通知到外界。

因此在 Vue 中，將數據轉爲響應式，用了兩套方式：對象使用 Object.defineProperty()；數組則使用另外一套。

實現

es6 中能夠用 Proxy 偵測數組的變化。請看示例：

let data = [11,22]
let p = new Proxy(data, {
    set: function(target, prop, value, receiver) {
        target[prop] = value;
        console.log('property set: ' + prop + ' = ' + value);
        return true;
    }
    })
console.log(p)
p.push(33)
/*
輸出：
[ 11, 22 ]
property set: 2 = 33
property set: length = 3
*/

es6 之前就稍微麻煩點，可使用攔截器。原理是：當咱們執行 [].push() 時會調用數組原型（Array.prototype）中的方法。咱們在 [].push() 和 Array.prototype 之間增長一個攔截器，之後調用 [].push() 時先執行攔截器中的 push() 方法，攔截器中的 push() 在調用 Array.prototype 中的 push() 方法。請看示例：

// 數組原型
let arrayPrototype = Array.prototype

// 建立攔截器
let interceptor = Object.create(arrayPrototype)

// 將攔截器與原始數組的方法關聯起來
;('push,pop,unshift,shift,splice,sort,reverse').split(',')
.forEach(method => {
    let origin = arrayPrototype[method];
    Object.defineProperty(interceptor, method, {
        value: function(...args){
            console.log(`攔截器: args = ${args}`)
            return origin.apply(this, args);
        },
        enumerable: false,
        writable: true,
        configurable: true
    })
});

// 測試
let arr1 = ['a']
let arr2 = [10]
arr1.push('b')
// 偵測數組 arr2 的變化
Object.setPrototypeOf(arr2, interceptor)    // {20}
arr2.push(11)       // 攔截器: args = 11
arr2.unshift(22)    // 攔截器: args = 22

這個例子將能改變數組自身內容的 7 個方法都加入到了攔截器。若是須要偵測哪一個數組的變化，就將該數組的原型指向攔截器（行{20}）。當咱們經過 push 等 7 個方法修改該數組時，則會在攔截器中觸發，從而能夠通知外界。

到這裏，咱們只完成了偵測數組變化的任務。

數據變化，通知到外界。上文編碼的實現只是針對 Object 數據，而這裏須要針對 Array 數據。

咱們也來思考一下一樣的問題：

  1. 如何偵測數組的變化？
    • 攔截器
  2. 當數據發生變化的時候，咱們通知誰？
    • Watcher
  3. 依賴誰？
    • Watcher
  4. 什麼時候通知？
    • 修改數據的時候。攔截器中通知。
  5. 什麼時候收集依賴？
    • 由於要通知用數據的地方。用數據就得讀數據。在讀數據的時候收集。這和對象收集依賴是同樣的。
    • {a: [11,22]} 好比咱們要使用 a 數組，確定得訪問對象的屬性 a。
  6. 收集到哪裏？
    • 對象是在每一個屬性中收集依賴，但這裏得考慮數組在攔截器中能觸發依賴，位置可能得調整

就到這裏，不在繼續展開了。接下來的文章中，我會將 vue 中與數據偵測相關的源碼摘出來，配合本文，簡單分析一下。

關於 Array 的問題

// 須要本身引入 vue.js。後續也儘量只羅列核心代碼
<div id='app'>
        <section>
            {{ p1[0] }}
            {{ p1[1] }}
        </section>
</div>
<script>
const app = new Vue({
    el: '#app',
    data: {
        p1: ['ph', '18']
    }
})
</script>

運行後在頁面顯示 ph 18，控制檯執行 app.p1[0] = 'lj' 頁面沒反應，由於數組只有調用指定的 7 個方法才能經過攔截器通知外界。若是執行 app.$set(app.p1, 0, 'pm') 頁面內容會變成 pm 18。

其餘章節請看：

vue 快速入門 系列

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程