vue组件生命周期

最新推荐文章于 2023-10-12 16:53:05 发布

卡姿兰大长腿

最新推荐文章于 2023-10-12 16:53:05 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/weixin_46382477/article/details/108096756

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{message}}</h1>
    <button @click="update">更新数据</button>
    <button @click="destroy">销毁组件</button>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    methods: {
      update() {
        this.message = '我改变了数据'
      },
      destroy() {
        this.$destroy(); //组件被销毁以后， 再次对组件进行任何操作都 不起作用了
        // vm.$destroy();
      }
    },
    beforeCreate: function () {
      console.group('------beforeCreate 创建前状态:组件实例刚刚创建，还未进行数据观测和事件配置------');
      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 () {
      console.group('------created 创建完毕状态:实例已经创建完成，并且已经进行数据观测和事件配置------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

    },
    beforeMount: function () {
      console.group('------beforeMount挂载前状态:模板编译之前，还没挂载------');
      console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
      console.log(this.$el); //模板没有渲染
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 

    },
    mounted: function () {
      console.group('------mounted 挂载结束状态:模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示------');
      console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
      console.log(this.$el); //模板已经渲染
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      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(this.$el); //还是原来的数据，新数据还没渲染
      console.log("%c%s", "color:red", "data   : " + this.$data);
      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(this.$el); //新数据已经渲染完成
      console.log("%c%s", "color:red", "data   : " + this.$data);
      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(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      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(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message)

    }
  })
</script>

</html>