Vue 数据双向绑定

Vue数据双向绑定

1.表现

• 当数据发生变化的时候,前端视图也发生变化。
• 当前端视图变化时，数据也会跟着变化。

2.模拟双向绑定的实现

2. 1 视图层到数据层的实现

• 以 input 元素为例，实现视图层到数据层单向绑定,要实现首先要监听视图层是否发生变化。input 标签可以用 oninput 事件实现。

<input type='text' placeholder='编辑内容' id='input'/>
<script>
	var input = document.getElementById('input');
	var Vue = { 
	inputValue:'编辑内容'  // 与input标签绑定的值
	}
	input.oninput = function(){
		Vue.inputValue = this.value;
	}
</script>

• 从上面的例子可以看到，只要每次输入框输入内容的时候，与输入框绑定的数据 ‘inputValue’ 都会改变，实现了视图层到数据层的绑定。

2. 2 数据层到视图层的绑定。

• 因为数据层的数据是保存在对象里面的，实现数据层到视图层的绑定我们要用到对对象单个属性应用的隐藏函数 setter。

    <input type='text' id='input' value="0"/>
    <script>
        var input = document.getElementById('input');
        var Vue = {
            _inputValue:0 // 与 input 标签绑定的数据
        };
        Object.defineProperty(Vue,'inputValue',{
            get(){
                return this._inputValue; // 返回数据层的值
            },
            set(num1){
                this._inputValue = num1; // 可以理解为vue数据层里面的数据
                input.value = num1; // 更改视图层上的值
            }
        })
        // 每隔一秒为 Vue.inputValue 进行赋值
        setInterval(function(){
            Vue.inputValue += 1;
        },1000)
    </script>

• 对对象的属性赋值，都会调用该属性的 set() , 所以只要在 set() 函数里面对绑定在视图层上的值更新，就能实现数据层到视图层的绑定。

3. Vue双向绑定原理

通过模拟数据双向绑定的例子，我们可以看出，只要把这两种方式结合起来，就能实现 Vue 中的数据双向绑定。

原理总结

1. 实现双向绑定，要设置监听器，监听数据的变化（如例子的 oninput , 调用set()的时候 ）。
2. 绑定数据更新函数，监听到数据变化之后，调用绑定数据更新函数更新数据，更新视图。

引用网上的话:

• Vue是通过数据劫持以及结合发布者-订阅者来实现的，数据劫持是利用ES5的Object.defineProperty(obj, key, val)来劫持各个属性的的setter以及getter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图。