这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战
一、整体流程
new Vue()
- _init() 创建组件实例，初始化其数据、属性、事件等
$mount() 处理template或el选项,挂载vue实例到指定宿主元素（获得dom并替换宿主元素）
- mountComponent() 执行挂载，获取vdom并转换为dom
updateComponent() 执行初始化或更新
render() 渲染组件，获取vdom
update()初始化或更新，将传入vdom转换为dom，初始化时执行的是dom创建操作
new Watcher() 创建组件渲染watcher
vue生命周期的概念级理解：
- 概念：就是组件创建、更新和销毁过程
- 用途：生命周期钩子使我们可以在合适的时间做合适的事情
- 举个栗子：
初始化阶段：beforeCreate、created、beforeMount、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
- 实际应用
created工作内容：所有数据准备就绪，适合做数据获取、赋值等数据操作
mounted工作内容：$el已生成，可以获取dom；子组件也已挂载，可以访问它们
updated工作内容：数值变化已作用于dom，可以获取dom最新状态
destroyed工作内容：组件实例已销毁，适合取消定时器等操作
二、数据响应式
数据响应式是MVVM框架的最大特点，通过某种策略可以监听数据的变化。Vue中利用了js语言特性的Object.defineProperty()，通过定义对象属性getter/setter拦截对属性的访问。具体实现是在Vue初始化时，会调用initState，它会初始化data，props等，这里主要说data的初始化
initState
初始化数据，包括props、methods、data、computed和watch
initData
主要把data数据响应化
function initData (vm: Component) {
// 执行数据响应化
observe(data, true /* asRootData */);//observe方法返回一个Observer实例
}
Observer对象根据数据类型执行对应的响应化操作 defineReactive定义对象属getter/setter，getter负责添加依赖，setter负责通知更新,Dep负责管理一组Watcher，包括watcher实例的增删及通知更新
Watcher
Watcher的工作是解析一个表达式并收集依赖，当数值变化时触发回调函数，常用于$watch API和指令里，每个组件也会有对应的Watcher，数值变化会触发其update函数导致重新渲染
数组响应化
数组数据变化的侦测跟对象不同，我们操作数组通常使用push、pop、splice等方法，此时没有办法知道数据的变化，所以vue中采取的策略是拦截这些方法并通知Dep。
