深入Vue实现原理

weixin_34291004

于 2019-06-26 10:14:00 发布

阅读量193

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lsc-boke/p/11088359.html

版权

本文深入探讨了使用JavaScript的Object.defineProperty方法来监听和操作对象属性的机制。通过具体实例，展示了如何实现输入框中值的变化实时更新到页面上，并详细解释了set和get方法的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟着大佬撸原理

https://www.jianshu.com/p/123146abdd1a

自己总结:

<div>
    <input type="text" id="input-msg">
    <p id="output-msg"></p>
</div>

<script>
    var inputMsg = document.getElementById('input-msg');
    var outputMsg = document.getElementById('output-msg');
    var obj = {
        msg: 'hello'
    };

    var key = 'msg';
    
    var val = obj[key];

    Object.defineProperty(obj, 'value', {
        enumerable: true,
        configurable: true,
        set: function (newValue) {
            val = newValue;
            outputMsg.innerHTML = val;
            console.log('setter',val);
            console.log('setter',obj);
        },

        get: function () {
            console.log('getter',val);
            return val;
        }
    })
    inputMsg.addEventListener('input',function(e){
        obj['value'] = e.target.value;
        console.log(e.target.value)
    })
    console.log(obj)
</script>