不使用v-model实现双向绑定

最新推荐文章于 2024-07-02 10:28:56 发布

how to fail

最新推荐文章于 2024-07-02 10:28:56 发布

阅读量993

点赞数 1

分类专栏：双向绑定

本文链接：https://blog.csdn.net/wd_nmdqgmzfj/article/details/108053687

版权

本文分享了如何不使用v-model，而是通过Object.defineProperty和事件监听来手动实现Vue的双向绑定效果，详细解释了get和set函数在其中的作用，并给出了实际操作的代码示例和最终的展示效果。

摘要由CSDN通过智能技术生成

众所周知,v-model是vue中双向绑定的语法糖,使用起来非常方便,面试中问到双向绑定的原理,都知道是数据劫持(Object.defineProperty)和订阅发布模式结合实现,更有甚者让你手动实现双向绑定,鄙人有幸被怼,和大家分享一下我实现的双向绑定.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ip">
    <span id="sb"></span>
    <script>
        // 数据劫持
        var obj = {};
        Object.defineProperty(obj,'hello',{
            set: function(newValue){
                document.getElementById('ip').value = newValue
                document.getElementById('sb').innerHTML = newValue
            }
        });
        document.addEventListener('keyup',function(e){
            obj.hello = e.target.val