vue知识点拾遗

1.生命周期简述：

Vue2,Vue3 的生命周期比较多。

以下是Vue3生命周期的内容：
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount(): 组件挂载到节点上之前执行的函数。
onMounted(): 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数。
onActivated(): 比如从 A 组件，切换到 B 组件，B 组件激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
注：使用<keep-alive> 组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用组件解决。
vue3使用生命周期需要单独从vue中引用,并且只能在setup函数内调用

因为vue2比较容易理解，且与vue3基本上没有区别，所以只解释vue3生命周期，vue2参考vue3。
以下为两者生命周期对比：

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured
                 onRenderTracked
                 onRenderTriggered

2.为什么 Vue2 this 能够直接获取到 data 和 methods ?

答：通过this直接访问到methods里面的函数的原因是：因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)，若原生不支持bind，则使用call或者apply。

通过 this 直接访问到 data 里面的数据的原因是：data里的属性最终会存储到new Vue的实例（vm）上的 _data对象中，访问 this.xxx，是访问Object.defineProperty代理后的 this._data.xxx。

Vue的这种设计，好处在于便于获取。也有不方便的地方，就是props、methods 和 data三者容易产生冲突。
相关链接：为什么 Vue2 this 能够直接获取到 data 和 methods ? 源码揭秘！

3.vue组件是如何渲染和更新的？
1.初次渲染时，解析模板为render函数;触发响应式，监听data属性的getter,setter;执行render函数，生成vnode，使用patch(elem,vnode)函数渲染组件。
2.更新组件时，即修改了data后，触发setter，重新执行render函数，生成newVnode,再执行patch(vnode,newVnode)函数渲染组件。

3.Vue3能更快的原因？

1.功能模块按需加载（如生命周期函数，ref,reactive等按需加载），初始化更快。
2.diff算法优化，新增了静态标记（patch flag）属性，新旧节点对比只对比带有patch flag的节点，并可以通过flag的数值得知为何种标记。
3.Vue2中无论元素是否参与更新，每次都会重新创建然后渲染，Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。
4.默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化。Vue3使用事件侦听器缓存（cacheHandlers）来去掉静态标记，不会每次都进行比较。
5.Vue2通过object.defineProperty在初始化时一次性深度递归遍历生成响应式数据，而Vue3通过proxy在get中遍历数据且只遍历到需要获取到的数据所在的层级，加快了触发速度。