Vue3

Vue3进去曾经有一段时间了，我也是早早就关注了3，看起来变动有不少。作为一个应用Vue框架的前端，必须去相熟理解一下。

Vue3新个性

1.SFC：Composition Api（setup）

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

setup improvement

<script setup>// imported components are also directly usable in templateimport Foo from './Foo.vue'import { ref } from 'vue'// write Composition API code just like in a normal setup()// but no need to manually return everythingconst 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 reflet 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），它能够很好的解决组件在木板中逻辑与技术上的矛盾，应用办法如下，不太熟悉的能够去官网理解：

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