vue3中的生命周期

钩子函数	状态
setup	开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount	组件挂载到节点上之前执行的函数
onMounted	组件挂载完成后执行的函数
onBeforeUpdate	组件更新之前执行的函数
onUpdated	组件更新完成之后执行的函数
onBeforeUnmount	组件卸载之前执行的函数
onUnmounted	组件卸载完成后执行的函数
onActivated	被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行
onDeactivated	比如从 A 组件，切换到 B 组件，A 组件消失时执行
onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数


import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
    //生命周期函数一定要在 setup中执行
  setup() {
    onBeforeMount(() => {
        console.log('onBeforeMount');
    })
    onMounted(() => {
        console.log('onMounted');
    })
    onBeforeUpdate(() => {
        console.log('onBeforeUpdate');
    })
    onUpdated(() => {
        console.log('onUpdated');
    })
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount');
    })
    onUnmounted(() => {
        console.log('onUnmounted');
    })
    onActivated(() => {
        console.log('onActivated');
    })
    onDeactivated(() => {
        console.log('onDeactivated');
    })
    onErrorCaptured(() => {
        console.log('onErrorCaptured')
    })
  }
}

vue2和vue3双向绑定的区别

vue2.x双向数据绑定原理是通过ES5的Object.defineProperty，这个方法不兼容IE9以下的版本,有一个弊端就是无法兼听到数组内部的数据变化；而vue3.x是用ES6的语法 Proxy,相比Object.defineProperty的优势是：可以检测到数组内部数据的变化

vue3新特性

Performance：性能优化
Tree-shaking support：支持摇树优化
CompositionAPI：组合API
Fragment：新增的组件，模板可以有多个根元素
Better TypeScript support：更好的TypeScript支持
Custom Renderer API：自定义渲染器
性能比Vue2.x快1.2~2倍原因1： diff方法优化： vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较） vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容原因2：静态提升 vue2无论元素是否参与更新，每次都会重新创建然后再渲染 vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可原因3：时间侦听器缓存默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可原因4：ssr渲染
按需编译，体积比vue2.x更小
组合API（类似react hooks）
更好的Ts支持
暴露了自定义渲染API
更先进的组件

vue3的生命周期 vue2和vue3双向绑定的区别

vue3中的生命周期

vue3新特性