Vue.js响应式原理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js响应式原理相关的知识，希望对你有一定的参考价值。
本文和大家分享的主要是Vue.js 响应式原理相关内容，一起来看看吧，希望对大家 学习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 ）呢？
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’
},
render(){
console.log("render");
}
})
为了便于理解，首先考虑一种最简单的情况，不考虑数组等情况，代码如上所示。在 initData 中会调用 observe 这个函数将Vue 的数据设置成 observable 的。当 _data 数据发生改变的时候就会触发 set ，对订阅者进行回调（在这里是 render ）。
那么问题来了，需要对app._date.text 操作才会触发 set 。为了偷懒，我们需要一种方便的方法通过app.text 直接设置就能触发 set 对视图进行重绘。那么就需要用到代理。
代理
我们可以在Vue 的构造函数 constructor 中为 data 执行一个代理 proxy 。这样我们就把data 上面的属性代理到了 vm 实例上。
_proxy(options.data);/* 构造函数中 */
/* 代理 */ function _proxy (data) {
const that = this;
Object.keys(data).forEach(key => {
Object.defineProperty(that, key, {
configurable: true,
enumerable: true,
get: function proxyGetter () {
return that._data[key];
},
set: function proxySetter (val) {
that._data[key] = val;
}
})
});
}
我们就可以用app.text 代替 app._data.text 了。 .js
来源： 稀土掘金
以上是关于Vue.js响应式原理的主要内容，如果未能解决你的问题，请参考以下文章