vue源码分析之数据劫持(一)

最新推荐文章于 2023-03-21 20:21:06 发布

于丸

最新推荐文章于 2023-03-21 20:21:06 发布

阅读量304

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Ych_cxy/article/details/103194868

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

vue源码分析之数据劫持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body><script>
    // 判断是不是对象类型
    function isObj(x){
        if(Object.prototype.toString.call(x) == '[object Object]'){
            return true
        }
    }

    function Vue(options){
        this._data = options.data
        observe(options.data)
    }
    function observe(data){
        for(key in data){
            let val = data[key]
            Object.defineProperty(data,key,{
                get(){
                    return val
                },
                set(newVal){
                    if(newVal === val){
                        return
                    }
                    val = newVal
                    if(isObj(newVal)){
                        observe(newVal)
                    }
                }
            })

            if(isObj(data[key])){
                observe(data[key])
            }
        }
    }

    let vue = new Vue({
        el:"#app",
        data:{A:{a:1},B:2}
    })
</script>
</html>

于丸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue源码分析之数据劫持(一)

vue源码分析之数据劫持<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body></body><script> ...
复制链接

扫一扫

专栏目录