1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue单向数据流与双向绑定两者区别

vue单向数据流与双向绑定两者区别

时间:2021-11-09 11:07:56

相关推荐

vue单向数据流与双向绑定两者区别

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。