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

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

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

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

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

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

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

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

3 Composition API

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

4 setup
setup 是在 beforeCreate 之前执行
支持两个参数，props(组件传入的属性，响应式的)和context(可以访问以前this可以访问的属性)
可以直接写到