vue生命周期，vue执行顺序图，钩子函数

最新推荐文章于 2024-05-17 17:50:07 发布

阿川阿川

最新推荐文章于 2024-05-17 17:50:07 发布

阅读量857

点赞数 1

分类专栏： vue 文章标签： vue生命周期

vue 专栏收录该内容

67 篇文章 2 订阅

订阅专栏

一、生命周期导图

通过代码，理解生命周期，查看钩子函数的执行顺序

注：复制就可以运行查看

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

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

<script type="text/javascript">
    
  var app = new Vue({
    el: '#app',
    data: {
      message : "xuxiao is boy" 
    },
    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 更新前状态===============》');
      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>
</body>
</html>

create 和 mounted 相关

beforeCreate：el 和 data 都未初始化
created：完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted：完成挂载

update 相关

在控制台 console里执行以下命令

app.message= 'yes !! I do';

当 data 里的值被修改后，将会触发update的操作

destroy 相关

app.$destroy();

destroy操作，实例就不再受控制；

生命周期运用

beforeCreate（创建新的实例）：能不能使用这个解决请求空白的问题？

created(){}（具有默认特性的对象）：对对象及其事件完全初始化，实现函数自执行，数据观测(data observer)，属性和方法的运算， watch/event 事件回调

beforeMount（对象在DOM中适合形状）：DOM 为虚拟DOM 仍未完全加载

mounted（DOM已准备就绪并放置在页面内）：挂载元素内dom节点的获取

beforeUpdate（更改已完成，但尚未准备好更新DOM）：渲染完成，并监测到data发生变化

updated（在DOM中呈现的更改）：监测到data发生变化，并完成渲染更新视图之后触发

beforeDestroy（实例销毁之前调用，在这一步，实例仍然完全可用）：实例销毁之前调用，实例仍然完全可用。

destroyed（销毁后调用）：调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

nextTick：针对单一事件更新数据后立即操作dom

watch：监听数据变化，并做相应的处理

methods:{}：方法

computed:{}：计算属性

阿川阿川

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期，vue执行顺序图，钩子函数

一、生命周期导图通过代码，理解生命周期，查看钩子函数的执行顺序注：复制就可以运行查看<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.n...
复制链接

扫一扫

专栏目录