共计 2854 个字符，预计需要花费 8 分钟才能阅读完成。
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 >
- setup improvement 使顶层的绑定会被裸露给模板
- 应用组件，范畴里的值也能被间接作为自定义组件的标签名应用无需再注册，而引入的组件将被当作变量来应用
- 递归组件，能够间接在模板应用而无需 import
- 定义 props 与 emits 必须通过 defineProps 与 defineEmits
- 不同于一般的 setup 函数，setup 中是默认敞开的，如果要将外部属性裸露，则需应用 defineEepose 函数
- 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
- 2.xVue 的全局 api 转到了 app 上
- 因为 3.xVue 不在是结构器，所以 extends api 废除
- 当初 Vue 的 api 通过具名导出进行拜访，更好的反对 treeShaking
模板
- v-if 当初总是优先 v -for
- 后申明的模板同名属性总是会笼罩后面的属性
- :ref, 在 v -for 中不再会将每个元素放到 $refs 中，而是通过绑定一个函数，并将元素通过参数 el 传入，由开发自行处理 el
组件
- 函数组件相比 3.0 的一般组件劣势已不大，所以应用的必要性不高
- $attrs 当初蕴含了所有传递给组件的 attribute，包含 class 和 style
其余
侦听数组：当侦听一个数组时，只有当数组被替换时才会触发回调。如果你须要在数组被扭转时触发回调，必须指定 deep 选项
destory 周期: destoryed 曾经改为 unmounted，beforeDestory 改为 beforeUnmount
集体总结：
以上是集体感觉必要且罕用的一些变动，Vue3 带来的变动的确不小，很多同学感觉新加了太多 api，也新带来了许多变动，减少了不少的心智累赘。然而实际上在代码逻辑形象与内聚方面是更加无利的，这也是框架作者决定这样的起因之一。其次 Vue3 很多中央是兼容 Vue2 的，甚至我感觉能够配合着应用，并不是说用了 3 就把后面的全扔了。总的来说，Vue3 值得去尝试。
