vue2和vue3的区别

zebrar

于 2024-02-21 21:07:47 发布

阅读量867

点赞数 21

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zebrar/article/details/136218529

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

Vue.js 3 是 Vue.js 框架的下一个主要版本，相较于vue2有许多提升

一、性能提升

1.响应式系统的重写

a.vue2的响应式

vue2对数据双向绑定使用v-model指令，采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty劫持各个属性的setter和getter，当数据变动时，发布消息给订阅者，触发相应监听去渲染视图。
其中Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, desc)
//obj :  第一个参数就是要在哪个对象身上添加或者修改属性
//prop : 第二个参数就是添加或修改的属性名
//desc ： 配置项，一般是一个对象
 let number = 18
 let person = {
      name:'码农',
      sex:'男',
 }
 Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
      get(){
          console.log('有人读取age属性了')
          return number
      },
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
     set(value){
         console.log('有人修改了age属性，且值是',value)
         number = value
     }
})
console.log(person)

b.vue3的响应式

vue3的响应式基于Proxy的观察机制，减少了不必要的触发和重复计算，提升了性能。

reactive

作用：
● 用于将引用数据类型的非响应式数据转化为响应式数据。响应式转换是深层的，reactive会递归地将对象内部所有嵌套属性都转换为响应式属性，包括嵌套对象和嵌套数组
● 通过设置响应式的数据对象，可以在数据更新时自动触发渲染更新
语法：

<script setup>
  let obj = reactive({
    name:'zm',
    age:18
  })
  //obj即为reactive参数对象的代理对象
</script>

原理：
利用Proxy来实现对对象内部所有数据的劫持，并通过Reflect操作对象内部数据

  new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'

ref

作用
● 可以将基本和引用数据类型转化为可响应式的引用对象
● ref 函数对于需要对基本类型数据进行状态管理和响应式更新的场景非常有用。
语法

let age = ref(18)

打印age
在这里插入图片描述

如上图，若在js中获取变量的值，需要用 .value获取，在模版中操作数据不需要（会自动编译加上.value）
原理
● 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
● ref内部: 通过给value属性添加getter/setter来实现对数据的劫持

2.虚拟DOM的改进

Vue.js 3 中的虚拟 DOM 经过优化，生成更少的重写和更新操作，减少了不必要的 DOM 操作次数，从而进一步提升了性能。

3.Tree shaking支持

通过将内部模块作为 ES Module 进行导入，Vue.js 3 提供了更好的 Tree Shaking 支持，可以更精确地按需引入所需的代码，减少了打包后的文件大小。

4.编译器优化

Vue.js 3 中的编译器经过优化，生成的代码更加精简，执行效率更高。这有助于减少运行时的负担，提高应用程序的性能。

5.销毁和卸载的改进

Vue.js 3 的销毁和卸载过程也经过了改进，更加高效。不再需要执行额外的清理操作，从而提高了组件的销毁和卸载性能。

二、新增特性

1.Composition API

Vue 3 中引入了 Composition API，它是一种基于函数的 API，旨在更好地组织和重用代码。而响应式 API 是 Vue 2 中基于选项的 API，通过 data 和 computed 来创建响应式数据和计算属性。

主要区别在于：

组合式 API 更适合于组织复杂组件逻辑，它可以更灵活地将相关代码分离到不同的函数中，而响应式 API 则是基于选项组织代码。
组合式 API 可以更好地重用逻辑，将相关代码封装为函数后，可以在不同组件中进行复用，而响应式 API 则需要通过 mixin 或者 mixins 的方式进行逻辑重用。
组合式 API 在多个生命周期钩子的使用上更加灵活，可以根据需要灵活选择引入对应的生命周期钩子，而响应式 API 则是基于固定的生命周期函数。
总的来说，组合式 API 更灵活、更适合于复杂组件的开发，而响应式 API 则更适合于简单组件的开发。以下这些例子可以帮助大家更好理解

2.新组件

Fragment: 等同于 Vue.js 2.x 中的一个根元素上挂载多个子元素，现在可以使用 Fragment 来代替；
Teleport: 可以将子组件插入到 DOM 树中不同的地方，提供了更灵活的组件渲染方式；
Suspense: 用于异步加载组件的loading 界面，在异步加载过程中进行数据处理，优化了数据交互的体验。

3.其它 API 更新

● 改进了全局 API，如 createApp 可用于注册指令和组件全局 API；
● 将一些原来的全局 API 转移到应用对象上，例如: Vue.nextTick => app.nextTick()

3.新增 v-once 指令，用于只渲染一次元素；

三、使用方法的区别

生命周期

与 2.x 版本生命周期相对应的组合式 API的生命周期
● beforeCreate -> 使用 setup()
● created -> 使用 setup()
● beforeMount -> onBeforeMount
● mounted -> onMounted
● beforeUpdate -> onBeforeUpdate
● updated -> onUpdated
● beforeDestroy -> onBeforeUnmount
● destroyed -> onUnmounted
● errorCaptured -> onErrorCaptured
（除了setup，其他都需要立即调用回调函数）
新增的钩子函数
组合式 API 还提供了以下调试钩子函数：
● onRenderTracked
○ 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
○ 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
● onRenderTriggered
○ 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
○ 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。