vue3.0响应式原理

最新推荐文章于 2024-07-02 08:55:42 发布

面向百度丶CV开发

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量149

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45952434/article/details/129654627

版权

<!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>
    <input type="text" id="ipt">
    <p id="op"></p>
    <script>

        let obj = {
            txtVal: '初始值'
        }
        function myReactive(obj) {
            return new Proxy(obj, {
                get(target, property) {
                    // get()是当我们访问obj2的某个属性的时候就会执行 例如 obj2.txtVal
                    // target 是整个objRet对象
                    // property 就是objRet中的某个属性
                    return target[property]
                },
                set(target, property, newVal) {
                    // set()是当我们访问objRet的某个属性赋值的时候就会执行 例如 objRet.txtVal = '修改后的值'
                    // target 是整个objRet对象
                    // property 就是objRet中的某个属性
                    // newVal是赋的新值
                    ipt.value = newVal
                    op.innerHTML = newVal
                    return target[property] = newVal
                }
            })
        }
        let objRet = myReactive(obj)
        // objRet 称为obj的代理对象
        // 绑定初始值
        ipt.value = objRet.txtVal
        op.innerHTML = objRet.txtVal
        // 给input绑定input事件，只要事件触发就给代理对象objRet去更新值，然在set()去更新视图
        ipt.addEventListener('input', e => {
            // 赋值触发set方法
            objRet.txtVal = e.target.value
        })
    </script>
</body>

</html>