前言

诞生：Vue作为一个构造函数，在我们new Vue(options)的时候诞生了；
最终： 它最终会生成一个dom；

• vue 模版 ： 我们可以使用一系列指令，v-if/v-for 来控制试图
• mvvm：数据变化了，视图刷新
• watch：监听数据的变化，来做我们的需求
• 组件：像堆积木一样构建我们的网站
• 生命周期函数：每个阶段插入我们的逻辑
• 路由：路由更换页面刷新

一、如何解读？

初级0.1

• 了解 vue2 语法，了解其语法，理解什么是mvvm

初级1.0

• 数据如何驱动视图，对着 手写一个简易vue 一行行调试，这个demo涵盖了 虚拟dom，diff，补丁更新页面 过程
• 理解 vue响应式原理，如何做到数据变化通知页面更新

初级2.0

• 对着简易 vue-source 解读
• 文章 Vue2源码解析

高级3.0

• 进阶看文章，推荐 Vue.js 技术揭秘
• vue源码并不是沿着一个入口顺藤摸瓜读到尾，带着疑问去读吧

1. 数据驱动视图

• new Vue 发生了什么？

2. 响应式原理？

• 收集依赖
• 派发更新

3. 其他一些 黑科技

• template 模板 与 render 函数的关系？vue-loader是什么
• 子组件和父组件生命周期顺序？
• watch与computed 怎么监听数据变化？

二、解读流程

1、new Vue发生了什么？

1、入口：new Vue

2、初始化一个渲染watcher，进行第一次渲染，并且监听依赖来更新页面

2、响应式视图：三类watcher

3、模版解析触发依赖收集

3、依赖收集：vue 响应式原理

4、视图第一次渲染

4、视图更新：vm._update(vm.render())

5、组件如何解析渲染

5、组件渲染：createComponent

6、模版解析过程

6、模版解析：vue-loader原理

欢迎关注我的前端自检清单，我和你一起成长