Vue3 vue.jsvue3前端

Vue3
Vue3出来已经有一段时间了，我也是早早就关注了3，看起来变化有不少。作为一个使用Vue框架的前端，必须去熟悉了解一下。
Vue3新特性
1.SFC：Composition Api（setup） setup提供了一系列能够在其函数内部使用的api，使得能够很好的将业务逻辑划分开来
setup improvement

< script setup >

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

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

p { color: v-bind('theme.color'); }

生命周期
从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) // 1function 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

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