锐客网

  1. 首页 > 睿知 > it技术 > >

vue3和vue2的比较

IT知识比较Vue2

行是知之始,知是行之成。这篇文章主要讲述vue3和vue2的比较相关的知识，希望能为你提供帮助。
最近开始切入vue3的学习，处于在3和2的过渡阶段中，有时候用了3的写法，有时候用了2的写法，走火入魔了属于是，于是想写一篇文章，做一次全面的比较，给自己一个总结，希望经过本文，加一时间沉淀，我可以信誓旦旦说我熟练vue2/3


生命周期整体来看，变化不大，只是名字大部分需要??+ on??，功能上类似。使用上 Vue3 组合式 API 需要先引入，而 Vue2 选项 API 则可直接调用，如下所示。

importonMountedfrom 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??组件。


TeleportVue3 提供??Teleport??组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog
< button @click="dialogVisible = true"> 点击< /button>
< teleport to="body">
< div class="dialog" v-if="dialogVisible">
< /div>
< /teleport>

组合式API【vue3和vue2的比较】Vue2 是 选项式API??Option API??，一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。Vue3 组合式API??Composition API??则很好地解决了这个问题，可将同一逻辑的内容写到一起。
除了增强了代码的可读性、内聚性，组合式API 还提供了较为完美的逻辑复用性方案，如下所示公用鼠标坐标案例。
// main.vue
< template>
< span> mouse position x y< /span>
< /template>

< script setup>
importreffrom vue
import useMousePosition from ./useMousePosition

const x, y = useMousePosition()


< /script>
// useMousePosition.js
importref, onMounted, onUnmountedfrom vue

function useMousePosition()
let x = ref(0)
let y = ref(0)

function update(e)
x.value = https://www.songbingjia.com/android/e.pageX
y.value = https://www.songbingjia.com/android/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 = https://www.songbingjia.com/android/getter ? getter.call(obj) : val
if(Dep.target)
// 依赖收集
dep.depend()
if(childOb)

    推荐阅读


    上一篇：第十六周学习作业

    下一篇：Vue基础知识总结:快速构建Vue项目