當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時間：2025/3/21 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue单向数据流与双向绑定两者区别小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.Vue 在不同組件間強(qiáng)制使用單向數(shù)據(jù)流,父組件可以向子組件傳遞數(shù)據(jù)，但是子組件不能直接修改父組件的狀態(tài)。

2.數(shù)據(jù)的雙向綁定
主要由MVVM框架實現(xiàn)，主要由三部分組成View、ViewModel和Model組成，其中view和model不能直接進(jìn)行通信，他們通過中間件ViewModel來進(jìn)行通信。
當(dāng)Model部分?jǐn)?shù)據(jù)改變時，由于vue中Data Binding將底層數(shù)據(jù)和DOM進(jìn)行了綁定，ViewModel會通知view更新視圖；
當(dāng)視圖view數(shù)據(jù)變化也會同步到Model中，View和Model之間的同步完全是自動的，不需要人手動操作DOM。

vue中使用Object.defineProperty()函數(shù)的set,get函數(shù)完成數(shù)據(jù)雙向綁定。
下面是一個簡單的雙向綁定實現(xiàn)方法：

<!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的時候會觸發(fā)get函數(shù))}});textInput.addEventListener('keyup', function (e) {obj.foo = e.target.value;//給屬性賦值自動觸發(fā)set函數(shù)});</script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的vue单向数据流与双向绑定两者区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。