• vue3的新写法和特性整理——二、生命周期函数的变化


    1、弃用钩子“beforeDestroy”、“destroyed”
    ESlint检查

    2、钩子的变化

    <template>
      <div>
      </div>
    </template>
    
    <script>
    export default {
      setup() {
        console.log('setup');
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      },
      beforeUnmount() {
        console.log('beforeUnmount');
      },
      unmounted() {
        console.log('unmounted');
      },
      activated() {
        console.log('activated');
      },
    
      data() {
        return {
          initData: 'hello 你好'
        };
      },
    };
    </script>
    

      

     生命周期顺序

    注意:vue3中的生命周期函数,可以按需导入到组件中,且只能在 setup() 函数中使用

    <script>
    import { onMounted, onUpdated, onUnmounted } from 'vue';
    
    export default {
      setup() {
        onMounted(() => {
          console.log('mounted!');
        });
        onUpdated(() => {
          console.log('updated!');
        });
        onUnmounted(() => {
          console.log('unmounted!');
        });
        return {};
      }
    };
    </script>
    

      

    随笔为本人学习笔记以及个人看法,若有错误,欢迎指正
  • 相关阅读:
    【SQL】DBCC(zz)
    Temporary Tables and Table Variables
    SQL特殊字符处理zz
    更改 Office 解决方案的安装路径
    SQL优化
    zzSQL Server性能优化
    SQL Server2005 表分区三步曲(zz)
    zz精妙SQL
    Deal with an annoying Message in Excel
    SQL技巧总结
  • 原文地址:https://www.cnblogs.com/yjc-vue-react-java/p/13870285.html
Copyright © 2020-2023  润新知