vue資料的雙向繫結
阿新 • • 發佈：2022-05-12
什麼是資料雙向繫結？
vue是一個mvvm框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。這也算是vue的精髓之處了。值得注意的是，我們所說的資料雙向繫結，一定是對於UI控制元件來說的，非UI控制元件不會涉及到資料雙向繫結。 單向資料繫結是使用狀態管理工具（如redux）的前提。
一、訪問器屬性
Object.defineProperty()函式可以定義物件的屬性相關描述符， 其中的set和get函式對於完成資料雙向繫結起到了至關重要的作用，下面，我們看看這個函式的基本使用方式。
var obj = { foo:'foo' } Object.defineProperty(obj, 'foo', { get: function () { console.log('將要讀取obj.foo屬性'); }, set: function (newVal) { console.log('當前值為', newVal); } }); obj.foo; // 將要讀取obj.foo屬性 obj.foo = 'name'; // 當前值為 name
get即為我們訪問屬性時呼叫，set為我們設定屬性值時呼叫。
二、簡單的資料雙向繫結實現方法
<!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; } }); textInput.addEventListener('keyup', function (e) { obj.foo = e.target.value; }); </script> </body> </html>
使用Object.defineProperty()來定義屬性的set函式，屬性被賦值的時候，修改Input的value值以及span中的innerHTML；然後監聽input的keyup事件，修改物件的屬性值，即可實現這樣的一個簡單的資料雙向繫結。
三.具體實現資料繫結的思路
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
text: 'hello world'
}
});
</script>
思路總結如下：
輸入框以及文字節點與 data 中的資料繫結
輸入框內容變化時，data 中的資料同步變化。即 view => model 的變化。
data 中的資料變化時，文字節點的內容同步變化。即 model => view 的變化。