Vue2.0与Vue3.0双向绑定的比较

最新推荐文章于 2024-05-05 21:29:47 发布

小柒很爱喵

最新推荐文章于 2024-05-05 21:29:47 发布

阅读量394

点赞数 1

分类专栏： Vue系列

本文链接：https://blog.csdn.net/weixin_41950078/article/details/115332071

版权

Vue系列专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Vue2.0双向绑定的实现：

关键：Object.defineProperty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0 defineProperty</title>
</head>
<body>
    <span id="spanName">姓名</span><br/>
    <input type="text" id="inpName">
    <script>
        let obj = {
            name:''
        };
         // model => view 实现
        let newObj = JSON.parse(JSON.stringify(obj));//深拷贝一个对象
        //此处需要深拷贝一个对象是因为如果使用原来的对象，在执行get方法时，又会监听obj对象，会死循环
        
        //defineProperty(对象，对象属性，方法)
        Object.defineProperty(obj,'name',{
            get(){
                //拿到这个属性值
                return newObj.name;
            },
            set(val) {
                //如果对象的属性值没有改变、就不用继续执行
                if (val === newObj.name ) return;
                newObj.name= val;
                observer();//触发值的更新
            }
        });
        //改变view的值
        function observer() {
            spanName.innerHTML = obj.name;//在span中添加obj的name的内容
            inpName.value = obj.name;//把input输入的值赋给obj的name属性

        }
        setTimeout(()=>{
            obj.name = "syq";
        },3000)
        //view => model 实现
        inpName.oninput = function () {
            obj.name = this.value;
        }

    </script>
</body>
</html>

总结：Vue2.0使用defineProperty方法、被监听的对象需要进行一次深拷贝。

Vue3.0双向绑定的实现：

关键：ES6新特性：Proxy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3.0</title>
</head>
<body>
    <span id="spanName">姓名</span><br/>
    <input id="inpName" type="text">

    <script>
        let obj = {}
        //新建一个Proxy实例监听obj对象
        obj = new Proxy(obj,{
            get(target,prop){
                return target[prop];
            },
            set(target, prop, value) {
                target[prop] = value;
                observer();
            }
        });
        function observer() {
            spanName.innerHTML=obj.name;
            inpName.value = obj.name;
        }
        setTimeout(()=>{
            obj.name = 'xxx'
        },3000);
        
        inpName.oninput = function () {
            obj.name = this.value;
        }

    </script>
</body>
</html>

文中有任何疑问或者错误都可以提出。谢谢

小柒很爱喵

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0与Vue3.0双向绑定的比较

Vue2.0双向绑定的实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue2.0 defineProperty</title></head><body> <span id="spanName">姓名</span><br/> <inp
复制链接

扫一扫