对双向绑定的理解和总结

本文主要是介绍对双向绑定的理解和总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

• 主流的mvc(vm)框架都实现了单向数据绑定，即数据(model)变化主动触发ui(view)变化

• 而双向绑定则是，数据(model)变化主动触发ui(view)变化，同时ui(view)变化主动触发数据(model)变化，当然这里的ui变化指定表单中的用户输入，可通俗的理解为：在单向绑定的基础上给可输入元素（input、textarea等）添加change(input)事件，来动态修改model和view

双向绑定的简单实现

首先通过输入框和P标签展示，通过Object.defineProperty实现一个简易双向绑定的案例来进行理解

<h1>极简的双向绑定</h1>
<input type="text" id='txt_id' />
<p id="p_id"></p>
<script type="text/javascript">
/*
简单介绍下Object.defineProperty，有三个参数
    第一个参数：属性所在的对象
    第二个参数：是你要操作的属性
    第三个参数：被操作属性的的特性，这个参数的格式是,{}
        一般是两个
        get，读取属性时触发;
        set，写入属性时触发;
*/
var _xxObj = {};
Object.defineProperty(_xxObj,'xx_val',{
    get:function() {
        console.log('gggg')
        return 'xx123'
    },
    set:function(_n) {
        console.log(_n)
        document.getElementById('txt_id').value = _n;
        document.getElementById('p_id').innerHTML = _n;
    }
})
document.addEventListener('keyup',function(e){
    // console.log(e.target.value)
    _xxObj.xx_val = e.target.value;
})

</script>

对vue双向绑定的理解：

Vue.js是采用数据劫持结合发布者-订阅者模式的方式。

通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调

实现的思路及步骤总结：

• 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
• 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模版替换数据，以及绑定相应的更新函数
• 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应的回调函数，从而更新视图
• mvvm入口函数，整合以上三者

参考具体实现的源码及文章如下：https://github.com/DMQ/mvvm

这篇关于对双向绑定的理解和总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！