vue3实现双向数据绑定(原生)

vue3和vue2有什么区别?
vue3新添了很多类似于react的hook,只是为了方便代码管理,为了方便后期项目维护,用setup代替了data,很多操作直接放在setup中进行操作
不过vue3和vue2在双向数据绑定上还是有区别的,对数组的监听也有不同
vue3通过proxy代理进行双向数据绑定和数组监听,可以直接监听到数组中的变化,但是vue2不可以直接监听数组的变化,需要通过 $set进行强制更新视图
vue3进行proxy双向数据绑定

<body>
    <input type="text" id="ipt">
    <h3 id="text"></h3>
    <script>
        let obj = {value:'你好世界'};
//封装函数
        function reactive(obj) {
            return new Proxy(obj, {
                get(tar,pro) {
                    return tar[pro];
                },
                set(tar,pro,value) {
                    ipt.value = value;
                    text.innerText = value;
                }
            })
        }
        const re = reactive(obj);
//获取元素
        let ipt = document.getElementById('ipt');
        let text = document.getElementById('text');
//赋值
        ipt.value = re.value;
        text.innerText = re.value;

//input事件
        ipt.addEventListener('input',e=> {
            re.value = e.target.value;
        })
    </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容