Vue3

Vue3

Vue3出来已经有一段时间了，我也是早早就关注了3，看起来变化有不少。作为一个使用Vue框架的前端，必须去熟悉了解一下。

Vue3新特性

1.SFC：Composition Api（setup）

setup提供了一系列能够在其函数内部使用的api，使得能够很好的将业务逻辑划分开来

setup improvement

< script setup >

1. setup improvement 使顶层的绑定会被暴露给模板
2. 使用组件，范围里的值也能被直接作为自定义组件的标签名使用无需再注册，而引入的组件将被当作变量来使用
3. 递归组件，可以直接在模板使用而无需import
4. 定义props与emits必须通过defineProps与defineEmits
5. 不同于普通的setup函数，setup中是默认关闭的，如果要将内部属性暴露，则需使用defineEepose函数
6. script setup拥有顶层await

状态驱动的动态 CSS

Css可以通过v-bind绑定变量，且还支持表达式（需要括号）,以前都是通过class来进行css的变化，现在通过状态驱动动态css能够带来更好的代码体验。

生命周期

从beforeMounted开始至unmounted，加上前缀on即为生命周期函数，使用时调用钩子函数，并将函数作为参数传入，则会在对应的周期调用作为参数的函数。
无需created，因为本身就等同于在该阶段，记得从vue中引入。

computed watch 属性

用法如下：

watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

const twiceTheCounter = computed(() => counter.value * 2)

toRef toRefs

toRef:将某个对象的某一属性Ref化

toRefs:将对象变为普通对象，而其属性都Ref化

注：setup api是在created的之前，所以无法获取data，method，prop等，更获取不到组件实例，所以this慎用

2.Ref Sugar

以下为当前的提案：

// declaring a reactive variable backed by an underlying ref
let count = $ref(1)

// no need for .value anymore!
console.log(count) // 1

function inc() {
  // assignments are reactive
  count++
}

第一版提案的出现引起不少争议，原因是官方一开始打算采用ref:的语法通过编译来省略对ref对象value属性的重复使用。这一语法由于破坏了js原生语法而遭致不少质疑与争论，哈哈哈，看大家的争论真的很有趣。详见：https://github.com/vuejs/rfcs...

第二版目前来看大家比较能接受(还未上正式版本)，通过将原先的ref函数改为用$ref即可享用这一语法糖效果。详见：https://github.com/vuejs/rfcs...，现在主要是看的第二版，第一版已经明显被废弃了，所以不用考虑，了解一下就行。

实际上$ref()是$(ref())的简写，所以真正的语法糖实际是$()

严格说$()是编译时的标记，用于提示编译器对所有加上标记的ref变量添加.value

需要注意的有一下几点：

​ 1由于是处于编译时的标记，所以使用时无需引入

​ 2只能伴随let使用，使用const无意义

​ 3可以标记任何返回ref的api

​ 4有简写的api有：$ref,$computed,$shallowRef

​ 5$$ref(),由于变量在被$()标记后会被编译器给之后使用的变量默认加上.value，所以当需要使用ref变量对象时需要通过$$()来取回

3.Teleport

Teleport，熟悉react的同学应该不会对此陌生（就是react的portal），它可以很好的处理组件在木板中逻辑与技术上的矛盾，使用方法如下，不太熟悉的可以去官网了解：

    //选择器选择传送
      
要传的元素
    

非兼容变更

全局API

1. 2.xVue的全局api转到了app上
2. 由于3.xVue不在是构造器，所以extends api废弃
3. 现在Vue的api通过具名导出进行访问，更好的支持treeShaking

模板

1. v-if现在总是优先v-for
2. 后声明的模板同名属性总是会覆盖前面的属性
3. :ref,在v-for中不再会将每个元素放到$refs中，而是通过绑定一个函数，并将元素通过参数el传入，由开发自行处理el

组件

1. 函数组件相比3.0的普通组件优势已不大，所以使用的必要性不高
2. $attrs 现在包含了所有传递给组件的 attribute，包括 class 和 style

其他

侦听数组：当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组被改变时触发回调，必须指定 deep 选项

destory周期: destoryed已经改为unmounted，beforeDestory改为beforeUnmount

个人总结：

以上是个人觉得必要且常用的一些变化，Vue3带来的变化确实不小，很多同学觉得新加了太多api，也新带来了许多变化，增加了不少的心智负担。但是实际上在代码逻辑抽象与内聚方面是更加有利的，这也是框架作者决定这样的原因之一。其次Vue3很多地方是兼容Vue2的，甚至我觉得可以配合着使用，并不是说用了3就把前面的全扔了。总的来说，Vue3值得去尝试。