vue源码系列文章good

ゝ一纸荒年。 2022-03-08 04:58 192阅读 0赞

## 关于Vue.js ##

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

## 将数据data变成可观察（observable）的 ##

那么Vue是如何将所有data下面的所有属性变成可观察的（observable）呢？

1.  `function observe(value, cb) {`
2.  `Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))`
3.  `}`
4.   
5.  `function defineReactive (obj, key, val, cb) {`
6.  `Object.defineProperty(obj, key, {`
7.  `enumerable: true,`
8.  `configurable: true,`
9.  `get: ()=>{`
10. `/*....依赖收集等....*/`
11. `/*Github:https://github.com/answershuto*/`
12. `return val`
13. `},`
14. `set:newVal=> {`
15. `val = newVal;`
16. `cb();/*订阅者收到消息的回调*/`
17. `}`
18. `})`
19. `}`
20.  
21. `class Vue {`
22. `constructor(options) {`
23. `this._data = options.data;`
24. `observe(this._data, options.render)`
25. `}`
26. `}`
27.  
28. `let app = new Vue({`
29. `el: '#app',`
30. `data: {`
31. `text: 'text',`
32. `text2: 'text2'`
33. `},`
34. `render(){`
35. `console.log("render");`
36. `}`
37. `})`

为了便于理解，首先考虑一种最简单的情况，不考虑数组等情况，代码如上所示。在[initData][]中会调用[observe][]这个函数将Vue的数据设置成observable的。当\_data数据发生改变的时候就会触发set，对订阅者进行回调（在这里是render）。

那么问题来了，需要对app.\_data.text操作才会触发set。为了偷懒，我们需要一种方便的方法通过app.text直接设置就能触发set对视图进行重绘。那么就需要用到代理。

## 代理 ##

我们可以在Vue的构造函数constructor中为data执行一个代理[proxy][]。这样我们就把data上面的属性代理到了vm实例上。

1.  `_proxy.call(this, options.data);/*构造函数中*/`
2.   
3.  `/*代理*/`
4.  `function _proxy (data) {`
5.  `const that = this;`
6.  `Object.keys(data).forEach(key => {`
7.  `Object.defineProperty(that, key, {`
8.  `configurable: true,`
9.  `enumerable: true,`
10. `get: function proxyGetter () {`
11. `return that._data[key];`
12. `},`
13. `set: function proxySetter (val) {`
14. `that._data[key] = val;`
15. `}`
16. `})`
17. `});`
18. `}`

我们就可以用app.text代替app.\_data.text了。

转载：[https://github.com/answershuto/learnVue/blob/master/docs/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86.MarkDown][https_github.com_answershuto_learnVue_blob_master_docs_E5_93_8D_E5_BA_94_E5_BC_8F_E5_8E_9F_E7_90_86.MarkDown]

[Object.defineProperty]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[Vue.js]: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96
[initData]: https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L107
[observe]: https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L106
[proxy]: https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L33
[https_github.com_answershuto_learnVue_blob_master_docs_E5_93_8D_E5_BA_94_E5_BC_8F_E5_8E_9F_E7_90_86.MarkDown]: https://github.com/answershuto/learnVue/blob/master/docs/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86.MarkDown