vue 实现数据绑定原理

 

案例： 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进行视图更新