思路
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
那么我們就使用Object.defineProperty()寫個小demo，模擬vue的雙向綁定效果，來借此學習一下Object.defineProperty()這個方法
Object.defineProperty(obj, prop, descriptor)
傳入參數
第一個參數:目標對象
第二個參數:需要定義的屬性或方法的名字。
第三個參數:目標屬性所擁有的特性。（descriptor）
前兩個參數不多說了，一看代碼就懂，主要看第三個參數descriptor，看看有哪些取值
descriptor
他又以下取值，我們簡單認識一下，后面例子，挨個介紹，
value:屬性的值(不用多說了)
writable:如果為false，屬性的值就不能被重寫,只能為只讀了
configurable:總開關，一旦為false，就不能再設置他的（value，writable，configurable）
enumerable:是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。
get:外部取obj的子屬性prop的值時觸發的回調
set:外部給obj的子屬性prop賦值時觸發的回調
注意：在 descriptor 中不能 同時設置訪問器 (get 和 set) 和 wriable 或 value，否則會錯，就是說想用(get 和 set)，就不能用（wriable 或 value中的任何一個）
demo
我們利用set和get來簡單模擬一下雙向綁定
1.先定義個構造函數
function Vue (opt){
var el=opt.el;
var data=opt.data;
var methods=opt.methods;
var model={};
var keys=Object.keys(data);
for (let i=0;i<keys.length;i++) {
Object.defineProperty(model, keys[i], {
set: function(newValue) {
data[keys[i]]=newValue
change(keys[i])
},
get: function() {
return data[keys[i]]
},
enumerable:true,
configurable:true,
})
}
var inputs=document.querySelector(el).querySelectorAll('input[v-model]')
for (let i=0;i<inputs.length;i++) {
inputs[i].onkeyup=function(){
var v=this.getAttribute('v-model')
model[v]=this.value
change(v)
}
}
var buttons=document.querySelector(el).querySelectorAll('*[v-click]')
for (let i=0;i<buttons.length;i++) {
buttons[i].onclick=function(){
var func=this.getAttribute('v-click')
methods[func]()
}
}
function change(k){
var els=document.querySelector(el).querySelectorAll('*[v-text="'+k+'"]')
for (let j=0;j<els.length;j++) {
els[j].innerHTML=data[k]
}
var inputs=document.querySelector(el).querySelectorAll('input[v-model="'+k+'"]')
for (let j=0;j<inputs.length;j++) {
inputs[j].value=data[k]
}
}
return model
}
2.寫一段簡單的html
<div id="app">
<input type="" name="" value="" v-model="obj"/>
<p v-text="obj"></p>
<input type="" name="" value="" v-model="aaa"/>
<p v-text="aaa"></p>
<button v-click="printObj">打印</button>
</div>
3.實例化vue方法
var vm=new Vue({
el:'#app',
data:{
obj:'',
aaa:'',
},
methods:{
printObj:function(){
alert(vm.obj)
}
}
})
如上所示，分別定義了obj和aaa兩個字段和一個printObj方法，來看看效果：
好了，大功告成！當然vue遠遠比這個復雜的多，這里只是練習一下Object.defineProperty()這個方法。
