手写mvvm双向绑定

最新推荐文章于 2024-03-02 12:03:40 发布

这个东西不好和你解释，因为我是菜狗

最新推荐文章于 2024-03-02 12:03:40 发布

阅读量83

点赞数

分类专栏： # 手写js功能实现

本文链接：https://blog.csdn.net/weixin_43912756/article/details/107460416

版权

手写js功能实现专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

参考：vue的双向绑定原理及实现

const obj = {};
const input = document.getElementById('input');
const span = document.getElementById('span');
// 数据劫持
Object.defineProperty(obj, 'text', {
    configurable: true,
    enumerable: true,
    get() {
        console.log("获取数据");
    },
    set(newVal) {
        console.log("数据更新了"),
        input.value = newVal,
        span.innerHTML = newVal
    }
})
// 输入监听
input.addEventListener('keyup', function(e) {
    obj.text = e.target.value;
})