Vue.js 响应式原理

关于 Vue.js

Vue.js 是一款 MVVM 框架,上手快速简单易用,通过数据绑定在修改数据的时候更新视图。Vue.js 的数据绑定原理依赖于 Object.defineProperty,尤大大在 Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因。Vue 通过设定对象属性的 setter/getter 方法来监听数据的变化,通过 getter 进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

将数据 data 变成可观察( observable )的

那么Vue 是如何将所有 data 下面的所有属性变成可观察的(observable)呢?

```javascript
function observer(value) {
Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive (obj, key, val, cb) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: ()=>{
/....依赖收集等..../
},
set:newVal=> {
cb();/订阅者收到消息的回调/
}
})
}

class Vue {
constructor(options) {
this._data = options.data;
observer(this._data, options.render)
}
}

let app = new Vue({
el: '#app',
data: {
text: 'text',
text2: 'text2'

top Created with Sketch.