vue原理之监听器实现

最新推荐文章于 2023-09-21 14:05:03 发布

马德里甜欣

最新推荐文章于 2023-09-21 14:05:03 发布

阅读量134

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51564923/article/details/122954999

版权

当每个属性发生变化时我们都对这个过程进行侦测，获取到完整的属性改变的过程，内附完整可成功运行的代码。

//Vue原理分析----变化侦测
export class Observer {
    constructor(value) {
        this.value = value
        if (Array.isArray(value)) {
            //数组的逻辑
        } else {
            //对象的逻辑
            this.walk(value)
        }
    }
    walk(obj) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i])
        }
    }
}
//循环 让对象的每一个属性都变成可观测的
function defineReactive(obj,key,val){
    if(arguments.length===2){
        val=obj[key]
    }
    if(typeof val === 'object'){
        //递归
        new Observer(val)
    }
    Object.defineProperty(obj,key,{
        enumerable:true ,//可枚举
        configurable:true,
        get(){
            console.log(`${key} 属性被读取了`);
            return val;
        },
        set(newVal){
            console.log(`${key}属性被修改了,新的值为${newVal}`);
            val = newVal
        }
    })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import {Observer} from './observer.js'
        let obj = new Observer({
            name:"小明",
            age:18,
            demo:{
                a:111,
                b:12
            }
        })
        console.log(obj.value.name);
        obj.value.age = 25
        console.log(obj.value.demo);
    </script>
</body>
</html>

马德里甜欣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue原理之监听器实现

当每个属性发生变化时我们都对这个过程进行侦测，获取到完整的属性改变的过程，内附完整可成功运行的代码。//Vue原理分析----变化侦测export class Observer { constructor(value) { this.value = value if (Array.isArray(value)) { //数组的逻辑 } else { //对象的逻辑 this
复制链接

扫一扫