案例： Vue 底層原理
// 目的： 使用原生js來實現Vue深入響應式
var box = document.querySelector('.box')
var button = document.querySelector('button')
var data = {
name: 'Jick'
}
// 觀察者對象
var observer = {...data}
// es5提供的api方法,這個方法不兼容ie8以及以下
// Object.defineProperty(對象，對象的屬性，對象屬性的修飾符 )
Object.defineProperty( data,'name',{
// get/set 統稱為: '存儲器'
get () {
return observer.name // 初始化賦值一個值給name屬性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})
button.onclick = function () {
data.name = "Rose"
}
box.innerHTML = data.name
雙向綁定的理解
Vue是通過數據劫持和事件的訂閱發布來實現的，數據劫持指的是Vue通過observer觀察者對象對data選項中的數據進行getter和setter設置【 Object.defineProperty 】，事件的訂閱發布指的是Vue通過事件來監聽，通知Vue進行視圖更新