一文深入了解Vue2和Vue3的区别
Vue3 和 Vue2 的区别
考点
- Vue3 和 Vue2 的介绍
- Vue3 新增特性
- Vue3 的优缺点
- Vue2 的优缺点
- Vue3 相对于Vue2 的非兼容性变更
答案
Vue3 的优点
1. 速度更快
- Vue3 相比 Vue2 来说，Vue3 重写了虚拟
Dom实现，编译模板的优化，更高效的组件初始化，undate性能提高 1.3 ~ 2 倍，SSR速度提高了 2 ~ 3 倍。
2. 体积更小
- 通过
webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的模块。
3. 更易维护
compositon Api可与现有的Options API一起使用。- 灵活的逻辑组合与复用。
Vue3模块可以和其他框架搭配使用。
4. 更接近原生
- 可以自定义渲染 API 。
更易使用
- 响应式
Api暴露出来。
- 轻松识别组件重新渲染原因。
Vue3 新增特性
- Vue3 中需要关注的一些新功能：
framentsTeleportcompositioncreateRenderer
framents
- 在 Vue3.x 中，组件现在支持有多个根节点。
<!-- Layout.vue --> <template> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> </template>
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>
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'
composition Api
- composition Api，也就是组合式
API，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理。
- composition Api 的使用：
composition 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 } } }
非兼容性变更
Global API
- 全局
Vue API已更改为使用应用程序实例。
全局和内部 API已经被重构为可tree-shakable。
模板指令
- 组件上
v-model用法已更改。 <template v-for>和非 v-for节点上key用法已更改。- 在
同一元素上使用的v-if和v-for优先级已更改。 *v-bind="object"现在排序敏感。 v-for 中的 ref 不再注册 ref 数组。
组件
- 只能使用
普通函数创建功能组件。 functional属性在单文件组件(SFC)。- 异步组件现在需要
defineAsyncComponent方法来创建。
渲染函数
- 渲染函数
API改变。 $scopedSlotsproperty 已删除，所有插槽都通过$slots作为函数暴露。- 自定义指令 API 已更改为与组件生命周期一致。
- 一些转换
class被重命名了：
v-enter->v-enter-from。v-leave->v-leave-from。
- 组件
watch选项和实例方法$watch不再支持点分隔字符串路径，请改用计算函数作为参数。 - 在
Vue 2.x中，应用根容器的outerHTML将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue3.x现在使用应用程序容器的innerHTML。
其他小改变
destroyed生命周期选项被重命名为onUnmounted。beforeDestroy生命周期选项被重命名为onBeforeUnmount。[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，这意味着容器本身不再被视为模板的一部分。
移除 API
keyCode支持作为v-on的修饰符。$on，$off和$once实例方法。- 过滤
filter。 - 内联模板
attribute。 $destroy实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
扩展
能够使用 webpack 的 tree-shaking 有什么好处？
- 对开发人员：能够使用
vue开发出更多其他的功能，而不必担忧整体体积过大。 - 对使用者：打包出来的包体积变小了。
