zoukankan      html  css  js  c++  java
  • VUe2.0 和 Vue3.0 的生命周期作对比

    VUe2.0 和 Vue3.0 的生命周期作对比

    beforeCreate -> 请使用 setup()
    created -> 请使用 setup()
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdate -> onBeforeUpdate
    updated -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed -> onUnmounted
    errorCaptured -> onErrorCaptured
    
    我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
    setUp这个生命周期发生在beforeCreate和created之前的哈。
    两种形式的生命周期函数是可以共存,它们都会被执行。
    
    <template>
      <div>
        生命周期
      </div>
    </template>
    <script>
    import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
    } from "vue";
    export default {
      name: "App",
      setup() {
        console.log("类似于created")
    
       //  挂载的生命周期
       onBeforeMount(()=>{
          console.log("Vue3.0类似于beforeMount ");
       })
    
      onMounted(()=>{
          console.log("Vue3.0类似于mounted ");
      })
    
      //   跟新阶段的生命周期
      onBeforeUpdate(()=>{
          console.log("Vue3.0类似于beforeUpdate ");
       })
    
        onUpdated(()=>{
          console.log("Vue3.0类似于 updated  ");
       })
    
    
      // 销毁阶段生命周期
      onBeforeUnmount(()=>{
          console.log("Vue3.0类似beforeDestory ");
       })
    
        onUnmounted(()=>{
          console.log("Vue3.0类似于destoryed ");
       })
    
      },
    
    
      beforeCreate(){
        console.log( 'vue2.0 beforeCreate' )
      },
      created(){
        console.log( 'vue2.0 created' )
      },
      beforeMount(){
        console.log( 'vue2.0 beforeMount' )
      },
      mounted(){
        console.log( 'vue2.0 mounted' )
      },
      beforeUpdate(){
        console.log( 'vue2.0 beforeUpdate' )
      },
      updated(){
        console.log( 'vue2.0 updated' )
      },
    
      // vue3中你仍然可以去使用vue2的生命周期。
      // 只是需要注意的是:beforeDestroy==>变成了 beforeUnmount
      //                destroyed==> unmounted
      // 我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
      // setUp这个生命周期发生在beforeCreate和created之前的哈。
      beforeUnmount() {
        console.log( 'vue2.0 beforeDestroy' )
      },
      //destroyed==> unmounted
      unmounted(){
        console.log( 'vue2.0 destroyed' )
      }
    };
    </script>
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    关于lucene断点续索引和增量索引的问题
    发布一个关于统计时间段的MDX语句
    【蛙蛙推荐】想设计一个关于软件开发的元搜索引擎,希望大家支持
    python中and和or的用法
    Hadoop实战中高级部分 之 Hadoop MapReduce高级编程
    (转)对实时分析与离线分析的思考(二)
    数据分析站点导航
    MapReduce:详解Shuffle过程
    分析能力的8个等级(My Level)
    (转)Tire Tree
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/14887170.html
Copyright © 2011-2022 走看看