vue中實現雙向資料繫結原理,使用了Object.defineproperty()方法,方法簡單
阿新 • • 發佈:2018-12-08
在vue中雙向資料繫結原理,我們一般都是用v-model來實現的 ,但一般在面試話會問到其實現的原理,
方法比較簡單,就是利用了es5中的一個方法.Object.defineproperty(),它有三個引數,
Object.defineproperty(obj,'val',attrObject), 引數1: obj是屬性所在的物件,引數2: 'val',屬性名,它是一個string型別,引數3: {}屬性所描述的物件
詳情可以看Object.defineproperty的文件
下面直接上demo,
html程式碼:
<input type="text" id="inp1"> <br> 你說啥: <span id="inp2"></span>
js程式碼
var inp1 = document.getElementById('inp1') var inp2 = document.getElementById('inp2') var obj ={} Object.defineProperty(obj,'val',{ // 傳入obj物件的一個屬性 屬性名是自定義的 set: function(newval){ // 通過set方法可以拿到新的值// console.log(newval) inp1.value= newval inp2.innerHTML= newval } }) // 給輸入框一個監聽事件 監聽變化時重新賦值 inp1.addEventListener('keyup',function(e){ // console.log(e.target.value) obj.val = e.target.value })
效果圖如下: