vue3相比vue2有哪些变化？

南方的雨天

已于 2022-07-05 12:10:13 修改

阅读量496

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-07-05 12:08:28 首次发布

本文链接：https://blog.csdn.net/q123q9/article/details/125615044

版权

1.生命周期的变化

整体来看变化不大，名字前边加上on，功能上相似，在使用vue3组合式API需要先引入，vue2API可以直接调用

//vue3
<script setup>
	import {onMounted} from 'vue'
	onMounted(()=>{
		....
	})
</script>

//vue2 
<script>
export default {
	Mounted() {
		...
	}
}
</script>

vue2	vue3
beforeCreate	Not needed
created	Not needed
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

setup是围绕着beforeCreate和created生命周期钩子运行的，所以不需要显式去定义。

2.多根节点

vue3支持多根节点，也就是fragment
在vue2编写页面时候，需要将组件包裹在<div>中，否则会报错。

//vue2
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

//vue3
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

3.异步组件

vue3提供Suspense组件，允许程序等待异步组件渲染兜底的内容，如loading，使用他之前，需要在模板声明，包括两个命名插槽，default和fallback，Suspense在异步内容加载完毕之后显示默认插槽，并将fallback插槽用作加载状态。

<tempalte>
   <suspense>
     <template #default>
       <todo-list />
     </template>
     <template #fallback>
       <div>
         Loading...
       </div>
     </template>
   </suspense>
</template>

4.组合式API

Vue2 是选项式API（Option API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起。

除了增强了代码的可读性、内聚性，组合式API 还提供了较为完美的逻辑复用性方案，举个🌰，如下所示公用鼠标坐标案例。

<template>
  <span>mouse position {{x}} {{y}}</span>
</template>

<script setup>
import { ref } from 'vue'
import useMousePosition from './useMousePosition'

const {x, y} = useMousePosition()

}
</script>

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的存在的命名冲突隐患，依赖关系不明确，不同组件间配置化使用不够灵活

5.响应式原理

vue2响应式原理是Object.defineProperty；vue3响应式原理是Proxy

Object.defineProperty

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

let obj = {}
let name = '小明'
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
  }
})

Proxy

Proxy是ES6新特性，通过第2个参数handler拦截目标对象的行为。相较于Object.defineProperty提供语言全范围的响应能力，消除了局限性。但在兼容性上放弃了（IE11以下）

基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。

const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : ''
  },
  set: function() {},
  ...
}

6.打包优化

tree-shaking：模块打包webpack、rollup等中的概念。移除 JavaScript
上下文中未引用的代码。主要依赖于import和export语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

以nextTick为例子，在 Vue2 中，全局 API 暴露在 Vue 实例上，即使未使用，也无法通过tree-shaking进行消除。

import Vue from 'vue'

Vue.nextTick(() => {
  // 一些和DOM有关的东西
})

Vue3 中针对全局和内部的API进行了重构，并考虑到tree-shaking的支持。因此，全局 API 现在只能作为ES模块构建的命名导出进行访问。

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有关的东西
})

通过这一更改，只要模块绑定器支持tree-shaking，则 Vue 应用程序中未使用的api将从最终的捆绑包中消除，获得最佳文件大小。受此更改影响的全局API有如下。

Vue.nextTick
Vue.observable （用 Vue.reactive 替换）
Vue.version
Vue.compile （仅全构建）
Vue.set （仅兼容构建）
Vue.delete （仅兼容构建）

7. TypeScript 支持

Vue3 由TS重写，相对于 Vue2 有更好地TypeScript支持。

Vue2 Option API中 option 是个简单对象，而TS是一种类型系统，面向对象的语法，不是特别匹配。
Vue2 需要vue-class-component强化vue原生组件，也需要vue-property-decorator增加更多结合Vue特性的装饰器，写法比较繁琐。