Vue3

Vue3

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

Vue3新特性

1.SFC：Composition Api（setup）

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

setup improvement

<script setup>
// imported components are also directly usable in template
import Foo from './Foo.vue'
import { ref } from 'vue'

// write Composition API code just like in a normal setup()
// but no need to manually return everything
const count = ref(0)
const inc = () => { count.value++ }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

< 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能够带来更好的代码体验。

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

生命周期

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

<script setup>
onMounted(mountedFunction)
function mountedFunction() {
    console.log('mounted')
}

</script>

<template>
  <p>hello</p>
</template>

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），它可以很好的处理组件在木板中逻辑与技术上的矛盾，使用方法如下，不太熟悉的可以去官网了解：

    <teleport to="body">//选择器选择传送
      <div>要传的元素</div>
    </teleport>

非兼容变更

全局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值得去尝试。