vue3新增/变化（一）

生命周期：

　　    vue2                    　　 vue3

　　beforeCreate       ---->        　　   setup 

　　　created　　　  ---->  　   　　   setup

　　beforeMount　　---->　　　onBeforeMount

　　   mounted          ---->       　　onMounted

　　　created　　　  ---->  　    　　  setup

　　beforeUpdate　  ---->　　　onBeforeUpdate

　　　updated           ---->     　　   onUpdated

　　beforeDestroy　 ---->   　　onBeforeUnmount

　　   destroyed　　---->　　　 　onUnmounted

　　   activated          ---->       　　 onActivated

　　deactivated　　 ---->  　        onDeactivated

　　errorCaptured　  ---->　　　onErrorCaptured

　　　　　　　　　　---->　　　onRenderTriggered

　　　　　　　　　　---->　　　 onRenderTracked

新增watchEffect函数

　　watch函数需要指明监视的属性，并在回调函数中执行。默认情况仅在侦听的源数据变更时才执行回调。也可以加上immediate: true来使其立即生效

　  watchEffect不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性。

　　//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。

　　watchEffect(() => {

　　　　const  a1 = sum.value

　　　　const  a2 = person.age

　　　　console.log('watchEffect执行了回调)

　　})

片段

　　Vue2中组件必须有一个跟标签。

　　　　<template>

　　　　　　<div>

　　　　　　　　<span></span>

　　　　　　　　<span></span>

　　　　　　</div>

　　　　</template>

　　Vue3中组件可以没有跟标签，可以直接写多个根节点，内部会将多个标签包含在一个Fragment虚拟元素中

　　　　好处：减少标签层级，减小内存占用，提升了渲染性能

　　　　<template>

　　　　　　<span></span>

　　　　　　<span></span>

　　　　</template>

Teleport：

　　将包裹组件html结构传送到任何指定的地方

　　如开发中经常会使用到弹窗组件，Dialog组件会被渲染到一层层子组件内部，处理样式、定位都变得麻烦困难。这时我们希望将组件挂载在body上面，来更方便的控制Dialog的样式。简单来说,我们既希望继续在组件内部使用Dialog,又希望渲染的 DOM 结构不嵌套在组件内部的 DOM 中。就可以用到<Teleport>, 它可以在（不改变组件内部元素父子关系）的情况下,建立一个传送门将Dialog渲染的内容传送到body上面

　　<teleport to= body >
　　　　<div v-if= isShow  class= dialog >
    　　　　<div class= dialog >
       　　　　 <h2>弹窗dialog</h2>
       　　　　 <button @click= isShow = false >关闭弹窗dialog</button>
   　　　　</div>
　　　　</div>
　　</teleport>