https://github.com/jrainlau/learning-vue-by-steps

https://github.com/jrainlau/learning-vue-by-steps

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jrainlau/learning-vue-by-steps
• Owner: jrainlau
• License: mit
• Created: 2018-04-11T02:49:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-13T08:33:55.000Z (about 7 years ago)
• Last Synced: 2024-12-26T17:11:01.038Z (4 months ago)
• Language: JavaScript
• Size: 349 KB
• Stars: 1
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![](./脑图.png)

![](./原理.png)

1. 原生data经过Observe递归改造。

2. Observe会为data所有属性添加getter/setter，变成observableData。

3. observableData传入Watcher。

4. Watcher内部会触发observableData的getter。

5. 这个getter会把当前的Watcher实例（特指watcher当中的update()函数）放入Dep的数组中，完成事件的订阅。

6. 当observableData被修改，会触发setter()，setter()会触发Dep内部被订阅的事件函数。

7. 被订阅的事件函数，也就是Watcher实例内的update()函数，会带着新值触发Compile对DOM进行渲染。

8. DOM完成渲染。

参考链接：

https://juejin.im/post/5abdd6f6f265da23793c4458

https://juejin.im/post/5acc17cb51882555745a03f8