Vue的通過數(shù)據(jù)劫持的方式實現(xiàn)數(shù)據(jù)的雙向綁定，即使用Object.defineProperty()來實現(xiàn)對屬性的劫持，但是Object.defineProperty()中的setter是無法直接實現(xiàn)數(shù)組中值的改變的劫持行為的,需要的朋友可以參考下

import { observe } from "./dataResp"
const output = () => {
    var obj = {
        data: {
            data: {
                map: {
                    dom: {
                        isgin: true
                    }
                },
                arg: 13
            },
            name: "小貓貓"
        },
        bool: [1,2,3,4]
    };
    observe(obj);
    obj.bool.push(7);
    document.getElementById("text").innerHTML = obj.data.name;
}
export default output

運行結果如下

在這里插入圖片描述

很明顯我們數(shù)組并捕獲不到 push方法除了 push 很多數(shù)組方法都捕獲不到

首先我們來看幾個方法分別是

在這里插入圖片描述

這幾個方法執(zhí)行說明當前數(shù)組被改寫了內容

那么我們可以去改寫這七個方法我們在案例 src目錄下創(chuàng)建 Arrays.js 然后大家先要知道這些方法被定義在哪里？ Array.prototype Array是數(shù)組類型的一個類對象這些方法就定義在Array的原型鏈上所以大家才能通過數(shù)組.這些方法去調用他們而我們要做的就是重寫這些方法要做的就是調用原來的方法然后在后面再去做自己需要做的響應式的事情

我們先在src下創(chuàng)建一個def.js 然后將之前寫在dataResp.js中的def放進def.js來

export const def = function(obj,key,value,enumerable) {
    Object.defineProperty(obj,key,{
        value,
        enumerable,
        //true  設為可寫
        writable: true,
        //true  設為可被刪除
        configurable: true
    });
}

然后將dataResp.js中的def方法干掉然后 dataResp.js引入一下def.js的 def方法

import {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> def } from './def.js';

這個是我之前沒想清楚抱歉

然后我們在Arrays.js中編寫代碼如下

import { def } from './def.js';
const arrayPrototype = Array.prototype;
export const arrayMethods = Object.create(arrayPrototype);
const redefineArrayMethod = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]
redefineArrayMethod.forEach(item =>{
    const backupFunction = arrayPrototype[item];
    def(arrayMethods,item,function(){
        backupFunction.apply(this, arguments);
        console.log('數(shù)組執(zhí)行了',item,'操作，值被修改為',this);
    },false);
})

這里我們先定義了redefineArrayMethod變量他的值是一個數(shù)組對應下面每一個字符串下標都是這些改變數(shù)組結構的函數(shù)關鍵字

然后定義 arrayPrototype 存一下Array的原型鏈 prototype 因為這些函數(shù)就在上面

然后創(chuàng)建arrayMethods 記錄創(chuàng)建數(shù)組并將arrayPrototype

最后循環(huán)redefineArrayMethod 對應每一次下標循環(huán) 拿到都是一個數(shù)組方法關鍵字第一次拿到’push’ 第二次’pop’

然后我們的響應式代碼就可以寫在這里首先我們先

const backupFunction = arrayPrototype[item];

備份一下原來的方法因為你別重寫之后方法原有的邏輯沒有了啊是不是

你別說 push我監(jiān)聽一下寫完 push都加不進去東西了那響應個啥這BUG了啊

然后我們調用def

第一個參數(shù)是 arrayMethods 就是被創(chuàng)建的對象

第二個這里傳的是當前循環(huán)的內容就是方法名數(shù)組下標看著是第幾次循環(huán) 第一次 push 第二次 pop 第三次 shift 依次類推

第四個參數(shù) 不用說這東西你們肯定不希望他參與遍歷吧果斷false 至于第三個是他的值我們要改寫這個函數(shù)啊就寫了這個函數(shù)新的內容

backupFunction.apply(this, arguments);

先把我們備份的之前的函數(shù)內容執(zhí)行了就是比如 push 我們先用執(zhí)行參數(shù)幫他把push應該有的增加下標的邏輯執(zhí)行了 this不用說肯定要的當前對象然后arguments代表我們當前函數(shù)拿到的所有參數(shù) 全部給了backupFunction.apply當參數(shù) 就是保證參數(shù)不要少了

然后下面的代碼我們就捕獲被改變的這個事情

然后我們改寫 dataResp.js中的Observer類代碼如下

class Observer{
    constructor(value) {
        //相當于  給拿到的對象  其中的__ob__綁定 值為thsi,在類中用this 表示取實例本身給__ob__賦值  最后一個enumerable為false 表示屬性不參與for遍歷
        def(value,'__ob__',this,false);
        if(Array.isArray(value)){
            Object.setPrototypeOf(value, arrayMethods);
        }
        this.walk(value);
    }
    walk(value) {
        for(let key in value){
            defineReactive(value,key);
        }
    }
}

就是監(jiān)聽到如果是數(shù)字類型調用一下 Object.setPrototypeOf 監(jiān)聽

然后我們再次運行代碼

在這里插入圖片描述

可以看到我們重寫的方法就起效了 push被成功捕獲并輸出了語句

在這里插入圖片描述

到此這篇關于vue數(shù)據(jù)響應式原理重寫函數(shù)實現(xiàn)數(shù)組響應式監(jiān)聽的文章就介紹到這了,更多相關vue重寫函數(shù)實現(xiàn)數(shù)組響應式監(jiān)聽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: