验证Vue生命周期执行顺序

最新推荐文章于 2024-03-24 22:42:29 发布

原创最新推荐文章于 2024-03-24 22:42:29 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #jquery #js

前端专栏收录该内容

9 篇文章

订阅专栏

Vue实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、卸载等一系列过程 , 这些就是Vue的生命周期

Vue的生命周期里边有八个生命周期钩子函数分别是

在这里插入图片描述

beforeCreate()创建前 
created()     创建
beforeMount() 挂载前
mounted()     挂载
beforeupdate()更改前
updated()     更改
beforDestory()销毁前
destroyed()   销毁

代码验证部分 :

我特意将创建方法放在最后边 , 依然是最先执行 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证Vue生命周期执行顺序</title>
</head>
<script src="js/vuejs-2.5.16.js"></script>
<body>
    <div id="app"></div>
</body>
<script>
  new Vue({
      el:"#app",

      beforeMount:function () {
        alert("挂载前方法执行了")
      },
      mounted:function () {
          alert("挂载方法执行了")
      },
      beforeUpdate:function () {
          alert("更改前方法执行了")
      },
      updated:function () {
          alert("更改方法执行了")
      },
      beforeDestory:function () {
          alert("销毁前方法执行了")
      },
      destroyed:function () {
          alert("销毁方法执行了")
      }  ,
      beforeCreate:function () {
          alert("创建前方法执行了")
      },
      created:function () {
          alert("创建方法执行了")
      },

  })
</script>
</html>