VUE3.0对比VUE2.0

因-戴克斯

已于 2024-04-15 14:35:16 修改

阅读量857

点赞数 16

文章标签： vue.js

于 2024-04-15 13:53:51 首次发布

本文链接：https://blog.csdn.net/qq_33295794/article/details/137770907

版权

vue3.0 与 vue2.0的不同之处有以下几点：

数据响应式原理

3.0基于Proxy的代理实现监测，vue2.0是基于Object.defineProperty实现监测。

vue2.0 通过Object.defineProperty，每个数据属性被定义成可观察的，具有getter和setter方法，当这些属性被修改后，Vue会自动追踪并重新计算相关的渲染函数，并更新视图。

vue3.0 通过Proxy用于创建一个对象的代理，从而实现对被代理对象操作的的拦截和自定义。

const proxy = new Proxy(target, handler)
// target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
// handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时被代理对象的行为（可以将其理解为一个容器，容器中包含着一些列可以操作对象的方法）。

Proxy代理的优点：可以检测到对象属性的新增和删除，监测到数据的索引和长度的变更。缺点是不支持低版本的浏览器。

API使用的方式

vue3.0 支持组合式api,也可以称为函数式API，可以方便我们把vue的实例的api选项拆成更小的函数，这样的好处是：方便组件代码的重组。在vue3.0中，我们可以通过核心函数setup()执行中生成Vue3.0的所有选项（data, computed,wacher, methods）

官方推荐的项目脚手架工具

vue2.0 推荐使用webpack或者是vue-cli来进行项目的构建和打包。
vue3.0 推荐使用vite工具进行项目构建和打包。
vite 的特点是本地开发编译时候，速度特别快。在开发环境中，Webpack 是先打包再启动开发服务器，而 Vite 则是直接启动，然后再按需编译依赖文件。
当使用 Webpack 时，所有的模块都需要在开发前进行编译打包，而 Vite在请求模块时才会进行实时编译，这种按需动态编译的模式极大地缩短了编译时间。

生命周期的不同

Vue 2.0 的生命周期：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置 (event/watcher option) 之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)、属性和方法的运算、watch/event 事件回调。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：实例挂载完成后调用。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有DOM，如移除手动设置的class。
updated：由于数据更改导致的虚拟 DOM 重新渲染
activated：keepalive 缓存组件激活
deactivated：keepalive 组件缓存。
beforeDestroy：实例销毁之前调用。
destroyed：实例销毁后调用。

Vue 3.0 的生命周期：

onBeforeMount：在挂载之前被调用
onMounted：在挂载之后被调用
onBeforeUpdate：在更新之前被调用
onUpdated：在更新之后被调用
onBeforeUnmount：在卸载之前被调用
onUnmounted：在卸载之后被调用

组件实例的创建方式

vue2.0 使用extend或者vue.component()
vue3.0 使用defineComponent()

官方推荐的http请求库

vue2.0推荐axios，通常会使用第三方库 axios 或者 vue-resource 来进行 HTTP 请求的封装。这些库通常需要在全局导入后才能使用，然后通过在组件内部使用相关方法来发起请求。
vue3.0推荐vite-plugin-mock，该库已经内置了一套基于axios的请求拦截和响应的机制，并且在vite默认启用，减少了大量的重复代码。