vue源码分析之数据代理(二)

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

原创最新推荐文章于 2023-03-21 20:21:06 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文深入解析Vue.js中数据响应机制的实现方式，包括数据代理与属性观察，通过自定义Vue实例展示如何使对象属性变动触发视图更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
    // 判断是不是对象类型
    function isObj(x){
        if(Object.prototype.toString.call(x) == '[object Object]'){
            return true
        }
    }

    function Vue(options){
        this._data = options.data
        observe(this._data)
        // 数据代理
        for(key in this._data){
            Object.defineProperty(this,key,{
                get(){
                    return this._data[key]
                },
                set(newVal){
                    this._data[key] = newVal
                }
            })
        }
    }
    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:{b:2 }}
    })
</script>
</body>
</html>