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值得去尝试。
发表回复