雙向繫結資料的實現(new Proxy 版本)

2022-07-08 21:54:20 字數 803 閱讀 3840

之前有用 object.defineproperty 實現了乙個雙向繫結,過於繁瑣,這是 基於 proxy 實現了一版,也優化了模版渲染的部分,**更簡潔。

年齡:}

身高:}

體重:}

雙向資料繫結:}

// 基礎知識點掃盲

// - 自定義事件,和呼叫自定義事件 new customevent this.dispathevent

// - 監聽攔截資料方法 proxy, new proxy(data, set(target, prop, newvalue){})

// - eventtarget 是乙個 dom 介面,由可以接收事件

class myvue extends eventtarget

observe(data) );

_this.dispatchevent(event);

return reflect.set(...arguments) // 設定值}})

}complienode(el) } }

let reg = /\]+)\s*\}\}/g;

if(reg.test(textcontent)) )}}

} else if(element.nodetype===1)} 資料, 即監聽 inputdata

element.addeventlistener('input', e => )

}this.complienode(element)

}});

}}

vue 雙向繫結資料的原理

vue能做到雙向繫結資料靠的就是object.defineproperty 俗稱屬性 例如 平時我們定義乙個引數 是這樣的 var book console.log book.name 一般的引數 但是你想在輸出的同時對引數進行一些操作 var book var name object.define...

vue jsx 雙向繫結 陣列 vue雙向繫結

主要功能是下面2個 1 def設定proxy 2 observe觀察資料 function initdata vm if isplainobject data warn data functions should return an object n vm var keys object.keys ...

更新 繫結資料 MVVM 雙向資料繫結之核心原理

1 概述 2 mvvm,model view viewmodel 3 雙向資料繫結 4 監聽 dom 改變 5 監聽模型資料變化,資料劫持 6 觀察者模式,observer js 幾個流行的框架 vuejs ember.js angularjs 都使用 mvvm 模式,該模式叫做檢視模型雙向資料繫結...