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

2021-09-03 16:04:04 阅读：164 来源： 互联网

标签：Vue 3.0 vm newVal key target 2.0 data log

<!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,3.0,vm,newVal,key,target,2.0,data,log
来源： https://www.cnblogs.com/llyk/p/15223485.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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