vue中create 什么触发_vue 生命周期的理解(created && mouted的区别)

生命周期先上图(笑skr个人 ~~)

什么是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

再上图，对生命周期图的标注

特别值得注意的是created钩子函数和mounted钩子函数的区别

每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

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

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

下面的代码建议复制后自己在控制台看效果。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

{ { message }}

15

16

17

18 (functionmyFunction() {19 setTimeout(function() {20 alert("Hello");21 }, 3000);22 })()23 var app = newVue({24 el: '#app',25 data: {26 message: "vue is frame"

27 },28 beforeCreate: function() {29 console.group('beforeCreate 创建前状态===============》');30 console.log("%c%s", "color:red", "el : " + this.$el); //undefined

31 console.log("%c%s", "color:red", "data : " + this.$data); //undefined

32 console.log("%c%s", "color:red", "message: " + this.message)33 },34 created: function() {35 console.group('created 创建完毕状态===============》');36 console.log("%c%s", "color:red", "el : " + this.$el); //undefined

37 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化

38 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

39 },40 beforeMount: function() {41 console.group('beforeMount 挂载前状态===============》');42 console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化

43 console.log(this.$el);44 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化

45 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

46 },47 mounted: function() {48

49 //beforecreated：el 和 data 并未初始化

50 //created:完成了 data 数据的初始化，el没有

51 //beforeMount：完成了 el 和 data 初始化

52 //mounted ：完成挂载

53 //另外在beforeMount，我们能发现el还是 { {message}}，这里就是应用的 Virtual DOM(虚拟Dom)技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

54 console.group('mounted 挂载结束状态===============》');55 console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化

56 console.log(this.$el);57 console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化

58 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

59 },60 beforeUpdate: function() {61 console.group('beforeUpdate 更新前状态===============》');62 console.log("%c%s", "color:red", "el : " + this.$el);63 console.log(this.$el);64 console.log("%c%s", "color:red", "data : " + this.$data);65 console.log("%c%s", "color:red", "message: " + this.message);66 },67 updated: function() {68 console.group('updated 更新完成状态===============》');69 console.log("%c%s", "color:red", "el : " + this.$el);70 console.log(this.$el);71 console.log("%c%s", "color:red", "data : " + this.$data);72 console.log("%c%s", "color:red", "message: " + this.message);73 console.log('updated:', document.getElementsByTagName('p').length)74 },75 beforeDestroy: function() {76 console.group('beforeDestroy 销毁前状态===============》');77 console.log("%c%s", "color:red", "el : " + this.$el);78 console.log(this.$el);79 console.log("%c%s", "color:red", "data : " + this.$data);80 console.log("%c%s", "color:red", "message: " + this.message);81 },82 destroyed: function() { //销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

83 console.group('destroyed 销毁完成状态===============》');84 console.log("%c%s", "color:red", "el : " + this.$el);85 console.log(this.$el);86 console.log("%c%s", "color:red", "data : " + this.$data);87 console.log("%c%s", "color:red", "message: " + this.message)88 }89 })90 //91 //el:为了将实例化后的vue挂载到指定的dom元素中。

92 //如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。

93 //94 //注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。

95 //控制台输入更新状态app.message= 'yes !! I do'

96 //app.$destroy();

97 //https://segmentfault.com/a/1190000008010666?utm_source=tag-newest 摘自这个网页加上自己的注释

98 //总结部分 beforecreate : 举个栗子：可以在这加个loading事件

99 //created ：在这结束loading，还做一些初始化，实现函数自执行

100 //mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

101 //beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

102

103

104

105

补充：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选