手动实现一个简单双向绑定——基于Object.defineProperty（vue2.X双向绑定原理）

最新推荐文章于 2024-04-13 11:37:21 发布

沉末

最新推荐文章于 2024-04-13 11:37:21 发布

阅读量242

点赞数

分类专栏： javascript 基础知识 vue 文章标签： javascript

本文链接：https://blog.csdn.net/chenjycm/article/details/105748439

版权

javascript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

基础知识

4 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

原理分析：

vue利用了Object.defineProperty()这个方法，重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

该方法详情参见MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="main">
        <input id="input" type="text">
        <div id="txt"></div>
        <button id="btn">按钮</button>
    </div>
</body>

<script>
    let input = document.querySelector("#input")
    let txt = document.querySelector("#txt")
    let btn = document.querySelector("#btn")
    
    let user = {
        name: "沉末"
    }
    let userName = user['name']
    input.value = userName
    txt.textContent = userName
    Object.defineProperty(user,'name',{
        get:function(el){
            console.log("get:"+userName)
            //获取值的时候触发
            return userName  //这里不能直接用user.name，执行.又会进入defineProperty
        },
        set:function(val){
            //值改变的时候触发数据更新
            input.value = val;
            txt.textContent = val;
            userName = val
        }   
    })
    //监听输入
    input.addEventListener('input',function(e){
        user.name = this.value //进入set
    })
    //监听点击
    btn.addEventListener('click',function(e){
        console.log('click:'+user.name)  //进入get
    })
</script>
</html>

沉末

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手动实现一个简单双向绑定——基于Object.defineProperty（vue2.X双向绑定原理）

原理分析：vue利用了Object.defineProperty()这个方法，重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。该方法详情参见MDN：https://developer.mozilla.org/zh-CN/docs/Web/J...
复制链接

扫一扫

专栏目录