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>

巴特西

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

最新文章

热门文章