关于vue.js:Vue3

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

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 慎用

以下为以后的提案：

// 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 变量对象时须要通过 $$() 来取回

Teleport，相熟 react 的同学应该不会对此生疏（就是 react 的 portal），它能够很好的解决组件在木板中逻辑与技术上的矛盾，应用办法如下，不太熟悉的能够去官网理解：

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

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

Vue3

Vue3 新个性

1.SFC：Composition Api（setup）

2.Ref Sugar

3.Teleport

非兼容变更

全局 API

模板

组件

其余

集体总结：