04.vue的生命周期

来源：互联网发布：矩阵组织结构的优点是编辑：程序博客网时间：2024/05/08 12:37

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。例如：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id='app'>  <p>{{a}}</p>  <a href="javascript:" @click='change'>修改文本内容</a>  <a href="javascript:" @click='del'>销毁vue对象</a></div><script src='vue.js'></script> <script>   new Vue({      el: "#app",      data: {          a : 'vue.js'      },      beforeCreate : function(){          console.log('创建实例之前');      },      created : function(){          console.log('实例已被创建');      },      beforeMount : function(){          console.log('插入数据到html之前');      },      mounted : function(){          console.log('已插入数据到html');      },      beforeUpdate : function(){          console.log('修改数据之前');      },      updated : function(){          console.log('数据已被修改');      },      beforeDestroy : function(){          console.log('对象销毁之前');      },      destroyed : function(){          console.log('对象已被销毁');      },      methods : {        change : function(){          this.a = 'VUE.JS';        },        del : function(){          this.$destroy();  //销毁vue对象        }      }  });</script></body></html>

输出：

创建实例之前
实例已被创建
插入数据到html之前
已插入数据到html

当我们点击 ”修改文本内容“ 时，则输出：

修改数据之前
数据已被修改

而点击 ”销毁vue对象“ 时，输出：

对象销毁之前
对象已被销毁

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过以后它会有帮助。

0 0