当前位置：首页 > news >正文

vue2和vue3的区别

news 2025/8/28 12:00:17

    这周呢主要就是整理整理学的东西，不然看的也记不住，把这些学的东西做成笔记，感觉会清楚许多，这次就把vue2和vue3的区别总结一下，明天要考四级，嗐，本来想着复习四级，结果只写了一两套题，四级这有点悬呀。

1.API

vue2:vue2使用选项类型API，选项类型API在代码里分割了不同的属性data,computed,methods等，一个逻辑散乱在文件不同的位置，导致代码可读性变乱

vue3:vue3中使用组合式API，将逻辑内容写到一起，增强了代码的可读性，还提供了逻辑复用性方案

2.生命周期

整体变化不大，但在vue3在组合式API中使用生命周期的时候，要先引入。而Vue2在选项API中可直接调用生命周期钩子。

vue2	vue3
beforeCreate
created
beforeMount	onbeforeMount
mounted	mounted
beforeUpdate	onbeforeUpdate
updated	onupdated
beforeDestory	onbeforeDestory
destoryed	ondestoryed

除了这些钩子函数，vue3还增加了onRenderTracked 和onRenderTriggered函数。

setup是围绕beforeCreate和created钩子函数去运行的，所以不需要显示去定义

3.多根节点

vue2中多根节点会报错

//vue2中存在多个节点会报错,但是vue3中支持多个节点
<template><header></header><main></main><footer></footer>
</template>
//只能存在一个根节点,需要一个div包裹
<template><div><header></header><main></main><footer></footer></div>
</template>

4.异步组件Suspense

vue3提供的Suspense组件，有两个插槽：#default和#fallback，来确保加载完成异步内容是显示默认插槽，并将#fallback插槽用作加载状态。

Suspense常见的使用场景：

配合vue3中的defineAsyncComponent来加载异步组件时，进行loading处理

配合路由使用，当未加载完毕时不显示router-view，而是渲染fallback的内容

<template><div class="child"><h3>我是Child组件</h3></div>
</template><script>
import {ref} from 'vue'
export default {name:'Child',setup(){return new Promise((resolve,reject)=>{setTimeout(()=>{resolve({sum})},3000)})}
}
</script>
<style>
.child{background-color:rgb(206, 225, 65) ;padding: 10px;
}
</style>

Child组件（有可能是异步组件，也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等）未加载完成前，显示 Loading…（即 fallback 插槽内容），加载完成时显示自身（即 default 插槽内容）

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template #fallback><h3>加载中。。。</h3></template></Suspense></div>
</template><script>
// import Child from './components/Child.vue'//静态引入
import {defineAsyncComponent} from  'vue' 
const Child = defineAsyncComponent(()=>import('./components/Child.vue')) //异步引入
export default {name:'App',components:{Child}
}
</script><style>
.app{background-color:royalblue ;padding: 10px;
}
</style>

Suspense组件会触发三个事件：pending，resolve和fallback。

pending：pending事件是在进入挂起状态时触发。
resolve：resolve事件是在default插槽完成获取新内容时触发。
fallback：fallback事件是在fallback插槽的内容显示时触发

5.Telport

vue3提供了Telport组件可将部分DOM移动到vue app之外的地方。比如说经常要是用的dialog弹框

<template><button @click="isShow = true">点我弹个窗</button><teleport to="#teleport-target">//将对话框移动到了teleport-target盒子下面<div v-if="isShow" class="mask"><div class="dialog"><h4>我是一个对话窗组件</h4><h4>我是一个对话窗组件</h4><button @click="isShow = false">关闭弹窗</button></div></div></teleport>
</template>

6.响应式原理

1.vue2响应式原理基础是Object.defineProperty，通过Object.defineProperty来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调

Object.defineProperty基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象

2.vue3响应式原理基础是Proxy相较于vue2，提供语言全范围响应能力，消除了局限性

3.差异如下：

vue2

Object.defineProperty，不具备监听数组的能力，需要重新定义数组的原型来达到响应式
Object.defineProperty无法监测到对象属性的添加和删除
由于vue会在初始化实例时对属性执行getter和setter转化，所有属性必须在data对象上才能让vue将它转化为响应式
深度监听需要一次递归，对性能影响较大