淺談vue中數據雙向綁定的實現原理

來源：懂視網責編：小采時間：2020-11-27 22:30:01

淺談vue中數據雙向綁定的實現原理

淺談vue中數據雙向綁定的實現原理:vue中最常見的屬v-model這個數據雙向綁定了，很好奇它是如何實現的呢？嘗試著用原生的JS去實現一下。首先大致學習了解下Object.defineProperty()這個東東吧！ * Object.defineProperty() * 對對象的屬性進行定義/修改 * */ let obj =

推薦度：

點擊下載本文 文檔為doc格式

導讀淺談vue中數據雙向綁定的實現原理:vue中最常見的屬v-model這個數據雙向綁定了，很好奇它是如何實現的呢？嘗試著用原生的JS去實現一下。首先大致學習了解下Object.defineProperty()這個東東吧！ * Object.defineProperty() * 對對象的屬性進行定義/修改 * */ let obj =

vue中最常見的屬v-model這個數據雙向綁定了，很好奇它是如何實現的呢？嘗試著用原生的JS去實現一下。

首先大致學習了解下Object.defineProperty()這個東東吧！

* Object.defineProperty()
 * 對對象的屬性進行 定義/修改
 * */

 let obj = {x:10}
 // 這兩種方式都相對來說比較簡單，直接，但是有些時候我們需要對對象的屬性的修改和增加進行必要的干預
// obj.y = 20;
// obj.x = 100;
// obj.x = 'abc';
//
// let arr = [1,2,3];
// arr.length = 'abc';//不可更改
// console.log(arr);

// console.log(obj.x);
// delete obj.x;
// console.log(obj);

 Object.defineProperty(obj, 'y', {
 configurable: false, //設置是否可刪除 false為不可刪除
 value: 100
 });

 console.log(obj);
 delete obj.y;//刪除
 console.log(obj);
 //設置對象某個屬性值的時候，順便設置它的屬性。enumerable 可枚舉 configurable 可以刪除否 writable 可改值否
 Object.defineProperty(obj, 'z', {//enumerable 可枚舉(沒有則新添加) 
 enumerable: true,//為false時，for..in object.keys json.stringfy 不能取到該z屬性
 value: 10000
 });

 for (var attr in obj) {
 console.log(attr);
 }

 Object.defineProperty(obj, 'm', {
 writable: false,//可更改
 value: 9
 });

 console.log(obj);
 obj.m = 100;
 console.log(obj);

以上總結了對象的defineProperty四個屬性：configurable，enumerable，value，writable

接下來再深入認識下它的另外兩個方法：set 以及get

注意：get和set不能與configurable，enumerable，value，writable同時存在

let obj = {x:10}

 let y = 100;
 Object.defineProperty(obj, 'y', {
 get() {
 //當obj的y屬性被調用的時候觸發，該方法的返回值將作為獲取的結果
 console.log('get');
 return y;
 },
 set(value) {
 //當obj的y屬性被設置的時候觸發
 console.log('set', value);
 y = value;
 }
 })

 console.log(obj.y);
 obj.y = 1;
 console.log(obj.y);

介紹完defineProperty了，最后我們一起看看如何簡單的實現數據雙向綁定吧！

<body>

 <input type="text" id="age">
 <h1></h1>

 <script>

 var ageElement = document.querySelector('#age');
 var h1Element = document.querySelector('h1');

 let obj = {};

 Object.defineProperty(obj, 'age', {
 get() {

 },
 set(value) {
 ageElement.value = value;
 h1Element.innerHTML = value;
 }
 })

 obj.age = 10;

 ageElement.oninput = function() {
 obj.age = this.value;
 }
 
 </script>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

淺談vue中數據雙向綁定的實現原理

推薦度：

點擊下載本文 文檔為doc格式

標簽：原理 VUE 實現

熱門焦點

淺談vue中數據雙向綁定的實現原理

淺談vue中數據雙向綁定的實現原理

淺談vue中數據雙向綁定的實現原理

最新推薦

猜你喜歡

熱門推薦