1.Vue 在不同组件间强制使用单向数据流,父组件可以向子组件传递数据,但是子组件不能直接修改父组件的状态。
2.数据的双向绑定
主要由MVVM框架实现,主要由三部分组成View、ViewModel和Model组成,其中view和model不能直接进行通信,他们通过中间件ViewModel来进行通信。
当Model部分数据改变时,由于vue中Data Binding将底层数据和DOM进行了绑定,ViewModel会通知view更新视图;
当视图view数据变化也会同步到Model中,View和Model之间的同步完全是自动的,不需要人手动操作DOM。
vue中使用Object.defineProperty()函数的set,get函数完成数据双向绑定。
下面是一个简单的双向绑定实现方法:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>forvue</title></head><body><input type="text" id="textInput">输入:<span id="textSpan"></span><script>var obj = {},textInput = document.querySelector('#textInput'),textSpan = document.querySelector('#textSpan');Object.defineProperty(obj, 'foo', {set: function (newValue) {textInput.value = newValue;textSpan.innerHTML = newValue;},get:function(){console.log(获取obj.foo的时候会触发get函数)}});textInput.addEventListener('keyup', function (e) {obj.foo = e.target.value;//给属性赋值自动触发set函数});</script></body></html>