vue 实例的生命周期

最新推荐文章于 2022-09-14 11:33:34 发布

Claroja

最新推荐文章于 2022-09-14 11:33:34 发布

阅读量78

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/claroja/article/details/112796247

版权

vue 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

这篇博客探讨了Vue.js组件的生命周期，从beforeCreate到destroyed的各个阶段，并展示了如何在实例中绑定更新和销毁事件的示例。通过示例代码，读者可以理解Vue.js中数据更新和组件销毁的过程。

摘要由CSDN通过智能技术生成

<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    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>
</body>