關於簡單的資料雙向繫結原理,defineProperty 和Proxy演示
阿新 • • 發佈:2020-07-24
雙向繫結,也就是說js中的資料傳到頁面,頁面中的內容到js,實現同步更新,簡單的演示可以直接複製下放HTML程式碼執行。
在這個例子中,我們使用defineProperty ,Object.defineProperty()
方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性,並返回此物件。詳細資訊可以自行檢視MDN文件。
簡單來說,defineProperty就是一個監聽器,監聽物件中某一個屬性被訪問和修改,在Vue2.0中就是採用defineProperty
注意事項
- 在使用get函式監聽屬性的時候,不能直接監聽當前屬性,否則會出現死迴圈。所以在使用前我將物件進行淺拷貝的原因
- 每一個defineProperty只能對一個物件屬性進行監聽,所以你必須在使用之前就得知道屬性的名字,但是很多時候屬性是動態生成的,,所以就很麻煩。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="hname"></h1> <input type="text"
defineProperty的弊端很明顯,在ES6中提出了Proxy,在Vue3.0中也將使用Proxy代替defineProperty,在Proxy中,我們可以在監聽整一個物件屬性的變化。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="hname"></h1> <input type="text" id="inputname"> </body> <script> let stu = { name: "" } //監聽器處理函式 //監聽器 stu = new Proxy(stu, { get(target, prop) { return target[prop]; }, set(target, prop,val){ if (val === target.prop) return; target[prop] = val; doubleBind(); } }); //將資料傳到頁面中 function doubleBind() { document.querySelector("#hname").innerHTML = stu[name]; inputname.value = stu[name];//id可以直接使用 } //輸入框事件,將頁面中資料返回 inputname.oninput = function () { stu[name] = inputname.value; } doubleBind() setTimeout(() => { stu[name] = "Mary"; }, 1000) </script> </html>
對比兩個例子,眼尖的friend會發現,第一個例子中我訪問物件屬性使用的是stu.name,而在第二個例子中使用的是stu[name]的方式。在《javascript高階程式設計》
引用型別的那一章提到:一般來說,訪問物件屬性時使用的都是點表示法,這也是很多面向物件語言中通用的語法。不過,
在 JavaScript 也可以使用方括號表示法來訪問物件的屬性。除非必須使用變數來訪問屬性,否則我們建議使用點表示法。在我們第二個例子Proxy中,prop是一個變數,所以我們使用方括號。