vue3相对于vue2有以下几个优化点：

1. 性能提升：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54
2. 新推出的Composition API 使组件更易维护，减少无用数据绑定页面更流畅
3. 更好的支持TypeScript，可以在创建命令里直接配置。

如何快速开始vue3.0

如果您想在新项目中快速试用 Vue 3，可以通过 CDN： <script src="https://unpkg.com/vue@next"></script>，或者使用脚手架搭建：

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
复制代码

接下来，我们来看看vue3有哪些新特性？

Composition API

vue3.0的升级有个重要的新特性就是这个Composition API(组合api)

vue有个很重要的思想就是组件化，它允许我们提取UI、接口、逻辑等可重复部分及其功能封装成组件，引入到我们所需要的地方，vue2.0已经实现了这一点，这可以使我们的应用程序在可维护性和灵活性方面有重大的提升。但是当应用程序变得非常大时——想想数百个组件。在处理如此大型的应用程序时，共享和重用代码变得尤为重要。vue3.0为了解决这一问题，而引入了Composition API(组合api)这一重大改变，这可以说是vue3.0最重要的新特性，没有之一。

Composition API能够使相同逻辑关注点相关的代码整合到一起，从而解决了逻辑关注点碎片化难以理解和维护的痛点，尤其是在一个大型复杂的组件中。说了这么多，那Composition API到底长什么样，要如何使用呢，接下来我们一起来看看。

setup组件选项

在vue组件中我们使用Composition API的地方，我们称为setup。setup组件选项在创建组件执行，也就是在beforeCreate这个生命函数之前就执行了，因此在setup中不能通过this来获取实例。

vue3.0 组合式api示例：

setup (props) {
  let repositories = []

  return {
    repositories
  }
}
复制代码

反应性变量 ref

ref在 Vue 3.0 中，用于使变量具有响应性，视图才能被更新以反映变化。ref接受参数并将其返回包装在具有value属性的对象中，然后可以使用该属性访问或改变反应变量的值，如下所示：

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1
复制代码

换句话说，ref的创建对我们价值的反应性引用。

setup内部注册生命周期

组合 API 上的生命周期钩子与选项 API 的名称相同，但前缀为on: 如mounted变成onMounted。这些函数接受一个回调，该回调将在组件调用钩子时执行。

import { ref, onMounted } from 'vue'

// in our component
setup (props) {
  const repositories = ref([])
  const getUserRepositories = () => {
    console.log(repositories)
  }

  onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`

  return {
    repositories,
    getUserRepositories
  }
}
复制代码

watch api

如何使用watch api对变量的变化作出反应呢？watch它接受 3 个参数：

• 我们想要观察的响应式引用或 getter 函数
• 回调
• 可选配置选项

如下所示：

import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})
复制代码

computed api

与watch类似，计算属性也可以使用computed从 Vue 导入的函数在 Vue 组件之外创建。

import { ref, computed } from 'vue'

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2
复制代码

在这里，该computed函数返回一个只读的 响应式引用，指向作为第一个参数传递给 .getter 的回调的输出computed。为了访问新创建的计算变量的值，我们需要像使用ref属性一样，用.value。

Teleport

当我们引入子组件时，该子组件的html元素都是渲染在父组件引用子组件所在的位置，如果子组件最外层元素有position: absolute，也是以其最近的相对定位父级元素作参考。

Teleport 提供了一种简洁的方法，允许我们控制我们希望在 DOM 中的哪个父级下渲染一段 HTML，而无需求助于全局状态或将其拆分为两个组件，就像哆啦A梦的“任意门”。像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多。原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。

const app = Vue.createApp({
  template: `
    <h1>Root instance</h1>
    <div id="endofbody"><div>
    <parent-component />
  `
})

app.component('parent-component', {
  template: `
    <h2>This is a parent component</h2>
    <teleport to="#endofbody">
      <div>Hello, vue3</div>
    </teleport>
  `
})
复制代码

这时<div>Hello, vue3</div>将会渲染到id为endofbody的元素下面。

如果有多个<teleport>组件可以将它们的内容挂载到同一个目标元素上。该顺序将是一个简单的附加， 稍后的挂载将位于目标元素中较早的挂载之后，如下所示：

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>

<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>
复制代码

Fragments（片段）

我们都知道在vue2.x中，不支持多个根组件，并且会在用户意外创建多根组件时发出警告。所以用户在写组件时，必须用一个div包裹多个组件

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>
      <aside>...</aside>
      ...
    </main>
    <footer>...</footer>
  </div>
</template>
复制代码

现在vue3.x就不需要有这个操作，在 3.x 中，组件可以有多个根节点

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main>
    <aside>...</aside>
    ...
  </main>
  <footer>...</footer>
</template>
复制代码

未完待续...

作者：不会打代码的程序员
链接：https://juejin.cn/post/7061468227867508772
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。