vue2数据响应式原理(3) 带你手写一个defineReactive响应式函数并理解其本质

news2024/10/2 14:25:09

然后我们来学一下defineReactive函数
defineReactive其实是一个要声明的函数基本都是作为一个响应式函数因为vue的使用比较经典因此也成了响应式的一个代表函数
而定义它的意义在于 defineProperty不好用

具体不好用在哪呢？我们打开上文用到的项目
将output.js代码修改如下

const output = () => {
    var obj = {
        a: 11
    };
    
    Object.defineProperty(obj,'a',{
        get() {
            return 31
        },
        set(value) {
            console.log("您正在改变 obj的a属性，修改后的值为",value);
        }
    });
    
    obj.a = 12;
    console.log(obj.a);
    document.getElementById("text").innerHTML = obj.a;
}

export default output

运行结果如下
在这里插入图片描述
defineProperty的特性
get会的返回值为元素最终值这里我们赋值时它先被赋值成了12 然后当你输出的一瞬间你获取他的值触发到了 get 于是这个get就又把它变回返回的这个 31了

但这个问题也并非误解我们将output.js代码更改如下

const output = () => {
    var obj = {
        a: 11
    };
    let temp;
    
    Object.defineProperty(obj,'a',{
        get() {
            return temp
        },
        set(value) {
            temp = value;
            console.log("您正在改变 obj的a属性，修改后的值为",value);
        }
    });
    
    obj.a = 12;
    console.log(obj.a);
    document.getElementById("text").innerHTML = obj.a;
}

export default output

我们在他们中间做了一个周转变量在set中拿到值然后在get中将记录的值返回回去
在这里插入图片描述
但其实我们现在这个写法真的是非常的捞看着

这个时候我们就可以定义一个函数用闭包来写

我们在src下创建一个类叫 dataResp.js
参考代码如下

export const defineReactive = function(data,key,val,enumerable,configurable) {
    Object.defineProperty(data,key,{
        enumerable,
        configurable,
        get() {
            return val
        },
        set(value) {
            if(value == val) {
                return
            }
            val = value;
        }
    });
}

这样我们就定义了一个功能的数据响应式声明方法
然后回去将output.js代码更改如下

import { defineReactive } from "./dataResp"
const output = () => {
    var obj = {};
    defineReactive(obj,"a",10,true,true);
    
    document.getElementById("text").innerHTML = obj.a;
}

export default output

这里我们调用了刚刚写在dataResp.js中的defineReactive函数第一个参数是要给那个对象声明响应式我们传入了obj 要给那个键我们输入了a 然后他的初始值我们输入了一个10 后面的enumerable和configurable 就给true
运行结果如下
可以看到 obj.a的值确实是10
在这里插入图片描述
然后我们尝试修改响应式变量看看set 和get 会不会触发
dataResp.js代码修改如下

export const defineReactive = function(data,key,val,enumerable,configurable) {
    Object.defineProperty(data,key,{
        enumerable,
        configurable,
        get() {
            console.log(`您正在获取${key}的值`);
            return val
        },
        set(value) {
            console.log(`您正在修改${key}的值`);
            if(value == val) {
                return
            }
            val = value;
        }
    });
}

我们在get和set中设定了输出语句然后更改output.js代码如下

import { defineReactive } from "./dataResp"
const output = () => {
    var obj = {};
    defineReactive(obj,"a",10,true,true);
    obj.a = 20;
    document.getElementById("text").innerHTML = obj.a;
}

export default output