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

vue2和vue3的区别

article 2024/11/16 1:51:40

    这周呢主要就是整理整理学的东西，不然看的也记不住，把这些学的东西做成笔记，感觉会清楚许多，这次就把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	onMounted
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将它转化为响应式
深度监听需要一次递归，对性能影响较大