Vue框架之Vue实例生命周期

宅羽

于 2020-01-20 10:12:04 发布

阅读量181

点赞数

分类专栏： Vue框架

本文链接：https://blog.youkuaiyun.com/sky6even/article/details/104047960

版权

Vue框架专栏收录该内容

16 篇文章

订阅专栏

本文深入解析Vue.js实例的生命周期，从beforeCreate到destroyed，详细介绍了每个阶段的功能与用途。通过具体示例，展示了如何利用生命周期钩子进行数据更新与组件销毁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ Vue实例生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

◆ 示例：

<script type="text/javascript">
    /*
      Vue实例的生命周期
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '生命周期'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
      beforeCreate: function(){
        console.log('beforeCreate');
      },
      created: function(){
        console.log('created');
      },
      beforeMount: function(){
        console.log('beforeMount');
      },
      mounted: function(){
        console.log('mounted');
      },
      beforeUpdate: function(){
        console.log('beforeUpdate');
      },
      updated: function(){
        console.log('updated');
      },
      beforeDestroy: function(){
        console.log('beforeDestroy');
      },
      destroyed: function(){
        console.log('destroyed');
      }
    });
  </script>