vue生命周期的理解

来自官方的经典生命周期图例

由图可知在整个vue页面从创建到销毁经历了以下8个钩子函数，这8个钩子函数都是自执行函数，不需要调用。

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeUnmount
8. unmounted

需要注意的是在vue3的生命周期中，相对严谨的生命周期区分是setup()组合式API这个组件函数替代了vue2的前两个钩子函数，执行时机也在beforCreate之前

每一阶段钩子函数对应的vue实例对象状态以及适用于在该钩子函数中操作的应用场景

beforeCreate：vue实例还没有创建，此时data和methods中的数据还没有初始化，在该钩子函数中无法访问data和methods中的内容（undefined）

那么vue实例化都做了哪些操作呢？

1. 触发beforeCreate钩子函数
2. 初始化data中的所有数据，具体的操作包括：遍历data 对象下所有属性,将其转化为 getter/setter,以便拦截对象赋值与取值操作,然后利用发布/订阅者模式,从而实现数据的双向绑定。然后向vue的响应式系统加入所有能找到的data中的属性。
3. 初始化并声明methods中的所有方法

beforeCreated:这时候vue实例创建了，但还没有初始化。不能够访问到data、methods中的内容

created:这时候vue已经完成了实例初始化，data和methods中的数据已经完成了初始化，可以正常调用，但是模板还没有编译，不能够获取DOM节点。

beforeMounte:该钩子函数的调用处于模板渲染到页面之前调用，即DOM节点挂载到真正的DOM树之前。在这之前，Vue实例完成了模板的编译，调用了render函数生成了vDOM（虚拟DOM），所以真正的页面DOM树还是空的，自然也无法访问获取某个DOM节点。

mounted:该钩子函数执行的时候，模板完成了，真实DOM完成了，页面正常渲染出来了。

beforeUpdate:这个钩子函数的执行前提是，data中的数据发生变化后调用，但需要注意的是data中的数据已经发生了变化是最新的了，但是页面DOM节点还没有发生变化，即数据驱动视图只完成了前半部分。

updated:与前一个钩子函数紧密联系，它的执行是“数据驱动视图”完成了之后，即数据发生了改变，对应的DOM节点也完成了变化之后才执行的。

beforeDestroy: 这个钩子函数在组件销毁之前执行，通常会在这个钩子函数里面解除一些全局或自定义事件

destroyed: 这个钩子函数会在组件实例销毁之后执行。

补充

1. 响应式:
2. 什么是响应式系统？
3. vue中采用虚拟DOM的作用和意义是什么？或者是采用的什么技术实现的？