vue3的新特性

一、Composition API（组合式API）

vue2 是基于Object.defineProperty的getter/setter作的数据监听，而vue3 中则改为了ES6的Proxy机制。
1、提升性能，Vue2是通过层层递归的方式对数据进行劫持，并且数据劫持一开始就要进行层层递归(一次性递归)，如果对象的路径非常深将会非常影响性能；而Proxy可以在用到数据的时候再进行对下一层属性的劫持。
2、Proxy可以实现对整个对象的劫持，而Object.defineProperty()只能实现对对象的属性进行劫持。所以对于对象上的方法或者新增、删除的属性则无能为力。
3、Proxy 支持对 Map、Set、WeakMap 和 WeakSet类型的代理；同时作为新标准将会受到浏览器厂商重点持续的性能优化。

1、setup函数

image.png

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

2、生命钩子函数

3、提供/注入

二、Teleport

三、片段

Vue 3 现在正式支持了多根节点的组件，也就是片段！

1、2.x 语法

在 2.x 中，由于不支持多根节点组件，当开发者意外创建一个时会发出警告。为了修复这个问题，许多组件被包裹在一个 <div> 中。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

2、3.x 语法

在 3.x 中，组件可以包含多个根节点！但是，这要求开发者显式定义 attribute 应该分布在哪里。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

vue3的新特性