vue2和vue3生命周期的区别
阅读原文时间:2022年06月23日阅读:1

首先,我们了解一下"生命周期"这个词。通俗的来说,生命周期就是一个事务从出生到消失的过程。例如,一个人从出生到去世。在vue中,vue的生命周期是指,从创建vue对象到销毁vue对象的过程。

  1. beforeCreate(创建前)
  2. created(创建后)
  3. beforeMount(载入前)
  4. mounted(载入后)
  5. beforeUpdate(更新前)
  6. updated(更新后)
  7. beforeDestroy(销毁前)
  8. destroyed(销毁后)

Vue第一次页面加载会触发beforeCreate created beforeMount mounted四个钩子函数,DOM渲染在mounted这个周期就已经完成

生命周期图示:

  1. setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
  2. onBeforeMount() : 组件挂载到节点上之前执行的函数;
  3. onMounted() : 组件挂载完成后执行的函数;
  4. onBeforeUpdate(): 组件更新之前执行的函数;
  5. onUpdated(): 组件更新完成之后执行的函数;
  6. onBeforeUnmount(): 组件卸载之前执行的函数;
  7. onUnmounted(): 组件卸载完成后执行的函数;
  8. onActivated(): 被包含在  中的组件,会多出两个生命周期钩子函数,被激活时执行;
  9. onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
  10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
1,vue2和vue3双向数据绑定原理发生了改变

vue2的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

vue3中使用了ES6Proxy API对数据代理。

相比vue2.x,使用proxy的优势如下:

  • defineProperty只能监听某个属性,不能对全对象监听
  • 可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)
  • 可以监听数组,不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。
2, vue2和vue3定义数据变量和方法的改变

vue2中定义数据变量是data(){},创建的方法要在methods:{}中。

而在vue3中直接在setup(){}中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得 return

如:

3,vue2和vue3生命周期钩子函数的不同
  • vue2中的生命周期

    • beforeCreate 组件创建之前
    • created 组件创建之后
    • beforeMount 组价挂载到页面之前执行
    • mounted 组件挂载到页面之后执行
    • beforeUpdate 组件更新之前
    • updated 组件更新之后
  • vue3中的生命周期

  • setup 开始创建组件

  • onBeforeMount 组价挂载到页面之前执行

  • onMounted 组件挂载到页面之后执行

  • onBeforeUpdate 组件更新之前

  • onUpdated 组件更新之后

    而且Vue3.x 生命周期在调用前需要先进行引入。

    如:

import {
reactive,
toRefs,
onMounted,
onBeforeMount,
onBeforeUpdate,
onUpdated,
} from "vue";

  • 来一个总的生命周期对比,这样更便于记忆

Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

除了这些钩子函数外,Vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

4,vue3中新加入了TypeScript和PWA的支持

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章