vue中的数据响应式原理持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情 v

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

vue2中使用了ES5里的Object.defineProperty方法，给对应的data中的数据的每个值添加了get、set方法，当值被修改时，就会触发对应的set方法，set方法里会通知对应的watcher，watcher接受后将触发render函数，重新渲染数据

<!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>
        let a = 1

        const obj = {}
        Object.defineProperty(obj,'a',{
            get(){
                return a
            },
            set(value){
                a=value
                console.log('值改变了')
            }
        })
    </script>
</body>
</html>

vue3中不再使用Object.defineProperty，改用ES6里的proxy来实现对应的给数据添加get和set方法

    var obj = new Proxy({},{
        get(target,key,receiver){
            console.log(target,key,receiver)
            return Reflect.get(target,key,receiver)
        },
        set(target,key,value,receiver){
            console.log(target,key,receiver)
            return Reflect.set(target,key,receiver)
        }
    })

proxy比Object.defineProperty的效率更高