一首歌的时间说说vue3.x在项目中常用的新特性

使用vue3.x一段时间,来整理一下在实际项目中，相比于vue2.x的不同之处。

1 Fragment
在 Vue2.x 中， template中只能有一个根节点,不管代码的结构如何，都不得不在最外层套一个div标签

<template> 
  <div> 
     <p>1</p>
     <p>2</p>
  </div> 
</template>

但在 Vue3.x 中，可以直接写很多结点

<template> 
     <p>1</p>
     <p>2 </p>
</template>

2 style里使用v-bind
有一个需求，需要根据一个变量值判断是否加边框样式，但因为需要覆盖antd原生样式，直接写动态class不太合适，所以就可以在style里，通过v-deep覆盖原生样式，然后使用v-bind，绑定isBorder变量。

::v-deep(.ant-image-img) {
  border: v-bind(isBorder);
}

// 变量使用响应式
let isBorder = ref<string>('none')
// 当条件满足时，给变量赋一个样式
isBorder.value = '1px solid #eeeeee'

这样就可以实现动态赋予样式了。

3 Composition API

可以把相关逻辑的代码放在一起，这样当需要修改一个功能时，就很容易去定位，不用来回找。vue2.x需要将一个逻辑分别放到data，methods，watch，computed等地方，代码太多的时候会很麻烦

4 setup
setup 是在 beforeCreate 之前执行
支持两个参数，props(组件传入的属性，响应式的)和context(可以访问以前this可以访问的属性)
可以直接写到<script setup>，就不用写返回值了。

5 Suspense
Suspense是一个带插槽的组件，提供了两种状态。刚开始渲染fallback状态下内容，之后达到特定条件，就会渲染default下的内容。

<Suspense> 
<template #default> 
<p>1</p>
</template> 
<template #fallback> 
<p>loading。。。</p>
</template> 
</Suspense>

6-ref和reactive
vue3.x不用返回data函数，而是通过ref和reactive来让数据具有响应式。使用ref定义的数据，在js取值的时候，需要加.value。ref比较适合定义基本数据类型，reactive更适合复杂数据类型。

7-hook函数引入
使用hook函数引入的方式，引入生命周期，以及watch、computed、路由守卫等

export default defineComponent({
setup() { 
onMounted(()=>{ 
console.log('挂载完成') 
})
watch(a, (newValue, oldValue) => { 
console.log(a) 
})
let addSum = computed(() => { 
return a.value+b.value 
})
return { onMounted， addSum }; 
}, 
});

8-生命周期
移除了beforeCreate和created，setup可以代替他俩。
其余的生命周期命名上发生了一些变化，分别是onBeforeMount，onMounted，onBeforeUpdate，onUpdated，onBeforeUnmount，onUnmounted。
9-watchEffect
watchEffect是一个可以立刻执行的watch,并当依赖项更新的时候，重新执行。但依赖的数据必须是响应式的。
10-mitt.js
vue3.x废除了EventBus，使用mitt.js代替方案（优点：足够小，仅有200bytes，可以跨框架使用）