VUE生命周期

最新推荐文章于 2022-04-01 14:21:07 发布

originks

最新推荐文章于 2022-04-01 14:21:07 发布

阅读量98

点赞数

分类专栏： vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/origin4316/article/details/120167193

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官方图片

在这里插入图片描述

beforeCreated-Created期间

Created之前进行初始化和数据data的绑定，但是el还没有挂载

Created-beforeMounted期间

开始挂载el，如果有就继续向下编译，如果没有el就停止编译，相当于暂停了生命周期，直到挂载el恢复生命周期

beforeMounted-Mounted期间

此时会将数据显示到界面上，上一步是显示{{***}}
在这里插入图片描述

beforeUpdate和update

当date中的数据发生改变时就会触发，组件进行数据更新
在这里插入图片描述

beforeDestroy

摧毁之前，实例还能使用

destroyed

Vue撤销

附上代码：

<!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>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    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)
    },
    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 更新前状态===============》');
      this.message="222"

      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)
    }
  })

  vm.message="111"
</script>

</html>

originks

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE生命周期

官方图片beforeCreated-Created期间Created之前进行初始化和数据data的绑定，但是el还没有挂载Created-beforeMounted期间开始挂载el，如果有就继续向下编译，如果没有el就停止编译，相当于暂停了生命周期，直到挂载el恢复生命周期beforeMounted-Mounted期间此时会将数据显示到界面上，上一步是显示{{***}}beforeUpdate和update当date中的数据发生改变时就会触发，组件进行数据更新before
复制链接

扫一扫

专栏目录