vue3和vue2的比较
Posted yerikyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3和vue2的比较相关的知识，希望对你有一定的参考价值。
最近开始切入vue3的学习，处于在3和2的过渡阶段中，有时候用了3的写法，有时候用了2的写法，走火入魔了属于是，于是想写一篇文章，做一次全面的比较，给自己一个总结，希望经过本文，加一时间沉淀，我可以信誓旦旦说我熟练vue2/3
生命周期
整体来看，变化不大，只是名字大部分需要+ on，功能上类似。使用上 Vue3 组合式 API 需要先引入，而 Vue2 选项 API 则可直接调用，如下所示。
import onMounted from vue
onMounted(() =>
)
// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不被覆盖
onMounted(() =>
)
export default
mounted()
,
通过表格看着更加直观
vue2 | vue3 |
beforeCreate | Not needed* |
created | Not needed* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
注意到setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地去定义。
多根节点
Vue3支持了多根节点组件，也就是fragment。关于fragment的理解在像素的一生 这篇文章倒也有过描述，后面看情况咯，要是接触多了，再进行详细分析。
Vue2中，编写页面的时候，我们需要去将组件包裹在<div>中，否则报错警告。
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
lt;/template>
Vue3，我们可以组件包含多个根节点，可以少写一层，算是一种进步吧
<template>
<header>...</header>
<main>...</main>
<footer>...</footer>
</template>
异步组件
Vue3 提供Suspense组件，允许程序在等待异步组件时渲染兜底的内容，如loading ，使用户体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default和fallback。Suspense确保加载完异步内容时显示默认插槽，并将fallback插槽用作加载状态。
<tempalte>
<suspense>
<template #default>
<todo-list />
</template>
<template #fallback>
<div>
Loading...
</div>
</template>
</suspense>
</template>
真实的项目中踩过坑，若想在setup中调用异步请求，需在setup前加async关键字。这时，会受到警告async setup() is used without a suspense boundary。
解决方案：在父页面调用当前组件外包裹一层Suspense组件。
Teleport
Vue3 提供Teleport组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog
<button @click="dialogVisible = true">点击</button>
<teleport to="body">
<div class="dialog" v-if="dialogVisible">
</div>
</teleport>
组合式API
Vue2 是 选项式APIOption API，一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。Vue3 组合式APIComposition API则很好地解决了这个问题，可将同一逻辑的内容写到一起。
除了增强了代码的可读性、内聚性，组合式API 还提供了较为完美的逻辑复用性方案，如下所示公用鼠标坐标案例。
// main.vue
<template>
<span>mouse position x y</span>
</template>
<script setup>
import ref from vue
import useMousePosition from ./useMousePosition
const x, y = useMousePosition()
</script>
// useMousePosition.js
import ref, onMounted, onUnmounted from vue
function useMousePosition()
let x = ref(0)
let y = ref(0)
function update(e)
x.value = e.pageX
y.value = e.pageY
onMounted(() =>
window.addEventListener(mousemove, update)
)
onUnmounted(() =>
window.removeEventListener(mousemove, update)
)
return
x,
y
</script>
解决了 Vue2中Mixin的存在的命名冲突隐患，依赖关系不明确，不同组件间配置化使用不够灵活。
响应式原理
Vue2 响应式原理基础是Object.defineProperty
Vue3 响应式原理基础是Proxy
Object.defineProperty
基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。
提示：writable和value与getter和setter不共存。
let obj =
let name = yerik
Object.defineProperty(obj, name,
enumerable: true, // 可枚举（是否可通过for...in 或 Object.keys()进行访问）
configurable: true, // 可配置（是否可使用delete删除，是否可再次设置属性）
// value: , // 任意类型的值，默认undefined
// writable: true, // 可重写
get: function()
return name
,
set: function(value)
name = value
)
搬运 Vue2 核心源码，略删减。
function defineReactive(obj, key, val)
// 一 key 一个 dep
const dep = new Dep()
// 获取 key 的属性描述符，发现它是不可配置对象的话直接 return
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) return
// 获取 getter 和 setter，并获取 val 值
const getter = property && property.get
const setter = property && property.set
if((!getter || setter) && arguments.length === 2) val = obj[key]
// 递归处理，保证对象中所有 key 被观察
let childOb = observe(val)
Object.defineProperty(obj, key,
enumerable: true,
configurable: true,
// get 劫持 obj[key] 的 进行依赖收集
get: function reactiveGetter()
const value = getter ? getter.call(obj) : val
if(Dep.target)
// 依赖收集
dep.depend()
if(childOb)
vue3与vue2的比较