_vue-3

最新推荐文章于 2023-08-25 15:44:17 发布

beifeng11996

最新推荐文章于 2023-08-25 15:44:17 发布

阅读量483

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/beifeng11996/article/details/129226318

版权

Vue3有了解过吗？能说说跟vue2的区别吗？

1. 哪些变化

从上图中，我们可以概览Vue3的新特性，如下：

速度更快
体积减少
更易维护
更接近原生
更易使用

1.1 速度更快

vue3相比vue2

重写了虚拟Dom实现
编译模板的优化
更高效的组件初始化
undate性能提高1.3~2倍
SSR速度提高了2~3倍

1.2 体积更小

通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的

能够tree-shaking，有两大好处：

对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
对使用者，打包出来的包体积变小了

vue可以开发出更多其他的功能，而不必担忧vue打包出来的整体体积过多

1.3 更易维护

compositon Api

可与现有的Options API一起使用
灵活的逻辑组合与复用
Vue3模块可以和其他框架搭配使用

更好的Typescript支持

VUE3是基于typescipt编写的，可以享受到自动的类型定义提示

1.4 编译器重写

1.5 更接近原生

可以自定义渲染 API

1.6 更易使用

响应式 Api 暴露出来

轻松识别组件重新渲染原因

2. Vue3新增特性

Vue 3 中需要关注的一些新功能包括：

framents
Teleport
composition Api
createRenderer

2.1 framents

在 Vue3.x 中，组件现在支持有多个根节点

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

2.2 Teleport

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

在vue2中，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

通过Teleport，我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它

<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
</teleport>

2.3 createRenderer

通过createRenderer，我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台

我们可以将其生成在canvas画布上

关于createRenderer，我们了解下基本使用，就不展开讲述了

import {
    createRenderer } from '@vue/runtime-core'

const {
    render, createApp } = createRenderer({
   
  patchProp,
  insert,
  remove,
  createElement,
  // ...
})

export {
    render, createApp }

export * from '@vue/runtime-core'

2.4 composition Api

composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理

关于compositon api的使用，这里以下图展开

简单使用:

export default {
   
    setup() {
   
        const count = ref(0)
        const double = computed(() => count.value * 2)
        function increment() {
   
            count.value++
        }
        onMounted(() => console.log('component mounted!'))
        return {
   
            count,
            double,
            increment
        }
    }
}

3. 非兼容变更

3.1 Global API

全局 Vue API 已更改为使用应用程序实例
全局和内部 API 已经被重构为可 tree-shakable

3.2 模板指令

组件上 v-model 用法已更改
<template v-for>和非 v-for节点上key用法已更改
在同一元素上使用的 v-if 和 v-for 优先级已更改
v-bind="object" 现在排序敏感
v-for 中的 ref 不再注册 ref 数组

3.3 组件

只能使用普通函数创建功能组件
functional 属性在单文件组件 (SFC)
异步组件现在需要 defineAsyncComponent 方法来创建

3.4 渲染函数

渲染函数API改变
$scopedSlots property 已删除，所有插槽都通过 $slots 作为函数暴露
自定义指令 API 已更改为与组件生命周期一致
一些转换class被重命名了：
- v-enter -> v-enter-from
- v-leave -> v-leave-from
组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径，请改用计算函数作为参数
在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML。

3.5 其他小改变

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
[prop default工厂函数不再有权访问 this 是上下文
自定义指令 API 已更改为与组件生命周期一致
data 应始终声明为函数
来自 mixin 的 data 选项现在可简单地合并
attribute 强制策略已更改
一些过渡 class 被重命名
组建 watch 选项和实例方法 $watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
<template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。
在Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。

3.6 移除 API

keyCode 支持作为 v-on 的修饰符
$on，$off和$once 实例方法
过滤filter
内联模板 attribute
$destroy 实例方法。用户不应再手动管理单个Vue 组件的生命周期。

----------@----------

你知道哪些Vue3新特性?

官网列举的最值得注意的新特性：v3-migration.vuejs.org(opens new window)

Composition API
SFC Composition API语法糖
Teleport传送门
Fragments片段
Emits选项
自定义渲染器
SFC CSS变量
Suspense

以上这些是api相关，另外还有很多框架特性也不能落掉

回答范例

api层面Vue3新特性主要包括：Composition API、SFC Composition API语法糖、Teleport传送门、Fragments 片段、Emits选项、自定义渲染器、SFC CSS变量、Suspense
另外，Vue3.0在框架层面也有很多亮眼的改进：

更快
- 虚拟DOM重写，diff算法优化
- 编译器优化：静态提升、patchFlags（静态标记）、事件监听缓存
- 基于Proxy的响应式系统
- SSR优化
更小：更好的摇树优化 tree shaking、Vue3移除一些不常用的 API
更友好 ：vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力
更容易维护 ：TypeScript + 模块化
更容易扩展
- 独立的响应化模块
- 自定义渲染器

----------@----------

Vue3速度快的原因

Vue3.0 性能提升体现在哪些方面

代码层面性能优化主要体现在全新响应式API，基于Proxy实现，初始化时间和内存占用均大幅改进；
编译层面做了更多编译优化处理，比如静态标记pachFlag（diff算法增加了一个静态标记，只对比有标记的dom元素）、事件增加缓存、静态提升（对不参与更新的元素，会做静态提升，只会被创建一次，之后会在每次渲染时候被不停的复用）等，可以有效跳过大量diff过程；
打包时更好的支持tree-shaking，因此整体体积更小，加载更快
ssr渲染以字符串方式渲染

一、编译阶段

试想一下，一个组件结构如下图

<template>
    <div id="content">
        <p class="text">静态文本</p>
        <p class="text">静态文本</p>
        <p class="text">{ message }</p>
        <p class="text">静态文本</p>
        ...
        <p class="text">静态文本</p>
    </div>
</template>

可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多 diff 和遍历其实都是不需要的，造成性能浪费

因此，Vue3在编译阶段，做了进一步优化。主要有如下：

diff算法优化
静态提升
事件监听缓存
SSR优化

1. diff 算法优化

Vue 2x 中的虚拟 dom 是进行全量的对比。
Vue 3x 中新增了静态标记(PatchFlag):在与上次虚拟结点进行对比的时候，值对比带有 patch flag 的节点，并且可以通过 flag 的信息得知当前节点要对比的具体内容化

Vue2.x的diff算法

vue2.x的diff算法叫做全量比较，顾名思义，就是当数据改变的时候，会从头到尾的进行vDom对比，即使有些内容是永恒固定不变的

Vue3.0的diff算法

vue3.0的diff算法有个叫静态标记（PatchFlag）的小玩意，啥是静态标记呢？简单点说，就是如果你的内容会变，我会给你一个flag，下次数据更新的时候我直接来对比你，我就不对比那些没有标记的了

已经标记静态节点的p标签在diff过程中则不会比较，把性能进一步提高

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
                        //上面这个1就是静态标记
 ]))
}

关于静态类型枚举如下

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
// 指示在diff算法中退出优化模式
BALL = -2

2. hoistStatic 静态提升

Vue 2x : 无论元素是否参与更新，每次都会重新创建。
Vue 3x : 对不参与更新的元素，会做静态提升，只会被创建一次，之后会在每次渲染时候被不停的复用。这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用

<p>HelloWorld</p>
<p>HelloWorld</p>

<p>{ message }</p>

开启静态提升前

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

开启静态提升后编译结果

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
 return (_openBlock(), _createBlock("div", null, [
  _hoisted_1,
  _hoisted_2,
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

可以看到开启了静态提升后，直接将那两个内容为helloworld的p标签声明在外面了，直接就拿来用了。同时 _hoisted_1和_hoisted_2 被打上了 PatchFlag ，静态标记值为 -1 ，特殊标志是负整数表示永远不会用于 Diff

3. cacheHandlers 事件监听缓存

默认情况下 绑定事件会被视为动态绑定 ，所以每次都会去追踪它的变化
但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

<div>
 <button @click = 'onClick'>点我</button>
</div>

开启事件侦听器缓存之前：

export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", {
    onClick: _ctx.onClick }, "点我", 8 /* PROPS */, ["onClick"])
                       // PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
 ]))
})

这里有一个8，表示着这个节点有了静态标记，有静态标记就会进行diff算法对比差异，所以会浪费时间

开启事件侦听器缓存之后：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", {
   
   onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
  }, "点我")
 ]))
}

上述发现开启了缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用

4. SSR优化

当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染

<div>
    <div>
        <span>你好</span>
    </div>
    ...  // 很多个静态属性
    <div>
        <span>{
  { message }}</span>
    </div>
</div>

编译后

import {
    mergeProps as _mergeProps } from "vue"
import {
    ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"

export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   
  const _cssVars = {
    style: {
    color: _ctx.color }}
  _push(`<div${
     
    _ssrRenderAttrs(_mergeProps(_attrs, _cssVars))
  }><div><span>你好</span>...<div><span>你好</span><div><span>${
     
    _ssrInterpolate(_ctx.message)
  }</span></div></div>`)
}

二、源码体积

相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API，再重要的是Tree shanking

任何一个函数，如ref、reactive、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小

import {
    computed, defineComponent, ref } from 'vue';
export default defineComponent({
   
  setup(props, context) {
   
    const age = ref(18)

    let state = reactive({
   
      name: 'test'
    })

    const readOnlyAge = computed(() => age.value++) // 19

    return {
   
        age,
        state,
        readOnlyAge
    }
  }
});

三、响应式系统

vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式

vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历

可以监听动态属性的添加
可以监听到数组的索引和数组length属性
可以监听删除属性

----------@----------

Composition API 与 Options API 有什么不同

分析

Vue3最重要更新之一就是Composition API，它具有一些列优点，其中不少是针对Options API暴露的一些问题量身打造。是Vue3推荐的写法，因此掌握好Composition API应用对掌握好Vue3至关重要

What is Composition API?(opens new window)

Composition API出现就是为了解决Options API导致相同功能代码分散的现象

体验

Composition API能更好的组织代码，下面用composition api可以提取为useCount()，用于组合、复用

compositon api提供了以下几个函数：

setup
ref
reactive
watchEffect
watch
computed
toRefs
生命周期的hooks

回答范例

Composition API是一组API，包括：Reactivity API、生命周期钩子、依赖注入，使用户可以通过导入函数方式编写vue组件。而Options API则通过声明组件选项的对象形式编写组件
Composition API最主要作用是能够简洁、高效复用逻辑。解决了过去Options API中mixins的各种缺点；另外Composition API具有更加敏捷的代码组织能力，很多用户喜欢Options API，认为所有东西都有固定位置的选项放置代码，但是单个组件增长过大之后这反而成为限制，一个逻辑关注点分散在组件各处，形成代码碎片，维护时需要反复横跳，Composition API则可以将它们有效组织在一起。最后Composition API拥有更好的类型推断，对ts支持更友好，Options API在设计之初并未考虑类型推断因素，虽然官方为此做了很多复杂的类型体操，确保用户可以在使用Options API时获得类型推断，然而还是没办法用在mixins和provide/inject上
Vue3首推Composition API，但是这会让我们在代码组织上多花点心思，因此在选择上，如果我们项目属于中低复杂度的场景，Options API仍是一个好选择。对于那些大型，高扩展，强维护的项目上，Composition API会获得更大收益

可能的追问

Composition API能否和Options API一起使用？

可以在同一个组件中使用两个script标签，一个使用vue3，一个使用vue2写法，一起使用没有问题

<!-- vue3 -->
<script setup>
  // vue3写法
</script>

<!-- 降级vue2 -->
<script>
  export default {
     
    data() {
     },
    methods: {
     }
  }
</script>

----------@----------

ref和reactive异同

这是Vue3数据响应式中非常重要的两个概念，跟我们写代码关系也很大

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

const obj = reactive({
    count: 0 })
obj.count++

ref接收内部值（inner value）返回响应式Ref对象，reactive返回响应式代理对象
从定义上看ref通常用于处理单值的响应式，reactive用于处理对象类型的数据响应式
两者均是用于构造响应式数据，但是ref主要解决原始值的响应式问题
ref返回的响应式数据在JS中使用需要加上.value才能访问其值，在视图中使用会自动脱ref，不需要.value；ref可以接收对象或数组等非原始值，但内部依然是reactive实现响应式；reactive内部如果接收Ref对象会自动脱ref；使用展开运算符(...)展开reactive返回的响应式对象会使其失去响应性，可以结合toRefs()将值转换为Ref对象之后再展开。
reactive内部使用Proxy代理传入对象并拦截该对象各种操作，从而实现响应式。ref内部封装一个RefImpl类，并设置get value/set value，拦截用户对值的访问，从而实现响应式

----------@----------

Vue3.2 setup 语法糖汇总

提示：vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return， template 便可直接使用，非常的香啊！

1. 如何使用setup语法糖

只需在 script 标签上写上 setup

<template>
</template>
<script setup>
</script>
<style scoped lang="less">
</style>

2. data数据的使用

由于 setup 不需写 return ，所以直接声明数据即可

<script setup>
import {
     
  ref,
  reactive,
  toRefs,
} from 'vue'

const data = reactive({
     
  patternVisible: false,
  debugVisible: false,
  aboutExeVisible: false,
})

const content = ref('content')
//使用toRefs解构
const {
      patternVisible, debugVisible, aboutExeVisible } = toRefs(data)
</script>

3. method方法的使用

<template >
  <button @click="onClickHelp">帮助</button>
</template>
<script setup>
import {
     reactive} from 'vue'

const data = reactive({
     
  aboutExeVisible: false,
})
// 点击帮助
const onClickHelp = () => {
     
  console.log(`帮助`)
  data.aboutExeVisible = true
}
</script>

4. watchEffect的使用

<script setup>
import {
     
  ref,
  watchEffect,
} from 'vue'

let sum = ref(0)

watchEffect(()=>{
     
  const x1 = sum.value
  console.log('watchEffect所指定的回调执行了')
})
</script>

5. watch的使用

<script setup>
import {
     
  reactive,
  watch,
} from 'vue'
//数据
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
     
  name:'张三',
  age:18,
  job:{
     
    j1:{
     
      salary:20
    }
  }
})
// 两种监听格式
watch([sum,msg],(newValue,oldValue)=>{
     
    console.log('sum或msg变了',newValue,oldValue)
  },
  {
     immediate:true}
)

watch(()=>person.job,(newValue,oldValue)=>{
     
  console.log('person的job变化了',newValue,oldValue)
},{
     deep:true}) 

</script>

6. computed计算属性的使用

computed 计算属性有两种写法(简写和考虑读写的完整写法)

<script setup>
import {
     
  reactive,
  computed,
} from 'vue'

// 数据
let person = reactive({
     
  firstName:'poetry',
  lastName:'x'
})

// 计算属性简写
person.fullName = computed(()=>{
     
  return person.firstName + '-' + person.lastName
})

// 完整写法
person.fullName = computed({
     
  get(){
     
    return person.firstName + '-' + person.lastName
  },
  set(value){
     
    const nameArr = value.split('-')
    person.firstName = nameArr[0]
    person.lastName = nameArr[1]
  }
})
</script>

7. props父子传值的使用

父组件代码如下（示例）：

<template>
  <child :name='name'/>  
</template>

<script setup>
  import {
     ref} from 'vue'
  // 引入子组件
  import child from './child.vue'
  let name= ref('poetry')
</script>

子组件代码如下（示例）：

<template>
  <span>{
  {props.name}}</span>
</template>

<script setup>
import {
      defineProps } from 'vue'
// 声明props
const props = defineProps({
     
  name: {
     
    type: String,
    default: 'poetries'
  }
})  
// 或者
//const props = defineProps(['name'])
</script>

8. emit子父传值的使用

父组件代码如下（示例）：

<template>
  <AdoutExe @aboutExeVisible="aboutExeHandleCancel" />
</template>
<script setup>
import {
      reactive } from 'vue'
// 导入子组件
import AdoutExe from '../components/AdoutExeCom'

const data = reactive({
     
  aboutExeVisible: false, 
})
// content组件ref

// 关于系统隐藏
const aboutExeHandleCancel = () => {
     
  data.aboutExeVisible = false
}
</script>

子组件代码如下（示例）：

<template>
  <a-button @click="isOk">
    确定
  </a-button>
</template>
<script setup>
import {
      defineEmits } from 'vue';

// emit
const emit = defineEmits(['aboutExeVisible'])
/**
 * 方法
 */
// 点击确定按钮
const isOk = () => {
     
  emit('aboutExeVisible');
}
</script>

9. 获取子组件ref变量和defineExpose暴露

即vue2中的获取子组件的ref，直接在父组件中控制子组件方法和变量的方法

父组件代码如下（示例）：

<template>
  <button @click="onClickSetUp">点击</button>
  <Content ref="content" />
</template>

<script setup>
import {
     ref} from 'vue'

// content组件ref
const content = ref('content')
// 点击设置
const onClickSetUp = ({
       key }) => {
     
  content.value.modelVisible = true
}
</script>
<style scoped lang="less">
</style>

子组件代码如下（示例）：

<template>
   <p>{
  {data }}</p>
</template>

<script setup>
import {
     
  reactive,
  toRefs
} from 'vue'

/**
 * 数据部分
* */
const data = reactive({
     
  modelVisible: false,
  historyVisible: false, 
  reportVisible: false, 
})

defineExpose({
     
  ...toRefs(data),
})
</script>

10. 路由useRoute和useRouter的使用

<script setup>
  import {
      useRoute, useRouter } from 'vue-router'

  // 声明
  const route = useRoute()
  const router = useRouter()

  // 获取query
  console.log(route.query)
  // 获取params
  console.log(route.params)

  // 路由跳转
  router.push({
     
    path: `/index`
  })
</script>

11. store仓库的使用

<script setup>
  import {
      useStore } from 'vuex'
  import {
      num } from '../store/index'

  const store = useStore(num)

  // 获取Vuex的state
  console.log(store.state.number)
  // 获取Vuex的getters
  console.log(store.state.getNumber)

  // 提交mutations
  store.commit('fnName')

  // 分发actions的方法
  store.dispatch('fnName')
</script>

12. await的支持

setup语法糖中可直接使用await，不需要写async，setup会自动变成async setup

<script setup>
  import api from '../api/Api'
  const data = await Api.getData()
  console.log(data)
</script>

13. provide 和 inject 祖孙传值

父组件代码如下（示例）：

<template>
  <AdoutExe />
</template>

<script setup>
  import {
      ref,provide } from 'vue'
  import AdoutExe from '@/components/AdoutExeCom'

  let name = ref('py')
  // 使用provide
  provide('provideState', {
     
    name,
    changeName: () => {
     
      name.value = 'poetries'
    }
  })
</script>

子组件代码如下（示例）：

<script setup>
  import {
      inject } from 'vue'
  const provideState = inject('provideState')

最低0.47元/天解锁文章

beifeng11996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
_vue-3

1. 哪些变化从上图中，我们可以概览的新特性，如下：1.1 速度更快相比1.2 体积更小通过的功能，可以将无用模块“剪辑”，仅打包需要的能够，有两大好处：可以开发出更多其他的功能，而不必担忧打包出来的整体体积过多1.3 更易维护compositon Api更好的Typescript支持是基于编写的，可以享受到自动的类型定义提示1.4 编译器重写1.5 更接近原生可以自定义渲染 API1.6 更易使用响应式暴露出来轻松识别组件重新渲染原因2. Vue3新增特性Vue 3 中需要关注的一些新功能包括：2.1
复制链接

扫一扫