VUE 2.0 生命周期函数

最新推荐文章于 2023-01-11 11:59:06 发布

RedWolfChao

最新推荐文章于 2023-01-11 11:59:06 发布

阅读量277

点赞数

分类专栏： Web 前端

本文链接：https://blog.csdn.net/RedWolfChao/article/details/84967544

版权

Web 前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

首先官方图一张

生命周期函数	说明
beforeCreate	组件实例刚被创建,组件属性计算之前,如data属性等
created	组件实例创建完成,属性已经绑定,但是DOM还未生成[也就是界面还没有渲染],$el属性还不存在
beforeMount	模板编译\|界面渲染\|挂载之前
mounted	模板编译\|界面渲染\|挂载完毕
beforeUpdate	当data中数据更新的时候,页面会刷新,这个是刷新之前
updated	页面刷新之后
activated	for keep-alive , 组件被激活时调用
deactivated	for keep-alive , 组件被移除时调用
beforeDestroy	组件销毁前调用
destoryed	组件销毁后调用

可以复制下面代码到任意HTML文件中执行查看[当然更推荐抄一遍]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LifeCycle</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      message: "FUCK"
    },
    methods: {
      fuck: function () {
        return "FUCK!!!";
      }
    },
    beforeCreate: function () {
      //  此时VUE生命刚开始[啥都没有]
      console.group("beforeCreate 函数");
      console.log("%c%s", "color:red", "fuck : " + this.fuck());  //  报错
      console.log("%c%s", "color:red", "$el : " + this.$el);  //  undefined
      console.log("%c%s", "color:red", "data : " + this.$data); //  undefined
      console.log("%c%s", "color:red", "message : " + this.message);  //  undefined

    },
    created: function () {
      //  created 初始化完毕DATA和Methods等属性
      //  作用: 可以做一下初始化的操作,后端请求数据之类的,
      console.group("created 函数");
      console.log("%c%s", "color:red", "fuck : " + this.fuck());
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    },
    beforeMount: function () {
      console.group("beforeMount 函数");
      //  组件被挂载,el文件初始化完毕,页面还没显示出来
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    },
    mounted: function () {
      console.group("mounted 函数");
      //  组件被挂载,el文件初始化完毕,页面已显示
      //  上一个页面通过router传过来的参数在这个位置才会有有
      //  作用 : 可以获取上一个文件[VUE]传过来的参数之类的,也可以吧created中的事情拿到这里来做
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    },
    beforeUpdate: function () {
      console.group("beforeUpdate 函数");
      //  数据更新完毕,页面还没有刷新
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    },
    updated: function () {
      console.group("updated 函数");
      //  数据更新完毕,页面刷新
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    },
    beforeDestroy: function () {
      console.group("beforeDestroy 函数");
      //  ... 没啥说的..
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    },
    destroyed: function () {
      console.group("destroyed 函数");
      //  ... 没啥说的..
      console.log("%c%s", "color:red", "$el : " + this.$el);
      /*      console.log("%c%s","color:red","↓↓↓this.$el start↓↓↓");
            console.log(this.$el);
            console.log("%c%s","color:red","↑↑↑this.$el end↑↑↑");*/
      console.log("%c%s", "color:red", "data : " + this.$data);
      /*      console.log("%c%s","color:red","↓↓↓this.$data start↓↓↓");
            console.log(this.$data);
            console.log("%c%s","color:red","↑↑↑this.$data end↑↑↑");*/
      console.log("%c%s", "color:red", "message : " + this.message);
    }
  });

</script>

</body>
</html>