Vue 2.0 与 Vue 3.0 响应式原理比较

Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。(引用：https://cn.vuejs.org/v2/guide/reactivity.html)

Vue 3.0 的响应式是基于 ES6 的 Proxy 实现的

直接上代码

<!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>Vue 响应式原理</title>
</head>

<body>
    <div id="msg">
        里斯
    </div>
    <div id="count">
        里斯
    </div>
    <script>
        window.log = console.log
        let data = {
            msg: '张三',
            count: 10,
        }
        let vm = {}
        // Vue 2.0 响应式原理
        // for (const key in data) {
        //     Object.defineProperty(vm, key, {
        //         enumerable: true,
        //         configurable: true,
        //         get() {
        //             log('get', data[key])
        //             return data[key]
        //         },
        //         set(newVal) {
        //             log('set', newVal)
        //             if (data[key] === newVal) return
        //             data[key] = newVal
        //             document.querySelector("#" + key).textContent = newVal
        //         }
        //     })
        // }
        //-----------------------
        // Vue 3.0 响应式原理
        vm = new Proxy(data, {
            get(target, key) {
                log('get', target[key], key)
                return target[key]
            },
            set(target, key, newVal) {
                log('set', newVal, key)
                if (target[key] === newVal) return
                target[key] = newVal
                document.querySelector("#" + key).textContent = newVal
            }
        })
        //-----------------------
        vm.msg = '李四'
        vm.count = 10
        log(vm.msg, vm.count)
    </script>
</body>

</html>