最近正好在学习Vue.js，实际敲轮播demo的时候发现了当时觉得很奇怪的问题：
初始化使用mounted钩子时，只调用了一次，之后就没有调用过了。害我一直以为是自己之后的代码书写有问题，结果自己再敲一遍还是只能初始化调用一次。。。发现这个问题后找找大神们的博客看了看，发现了created钩子的使用。下面就将这次的经历给记录下来。
生命周期的第一张图
在这里写照片的说明
什么是生命周期Vue实例，就是有一个完整的生命周期。 这意味着创建、初始化数据、编译模板、装载Dom、渲染-更新-渲染、卸载等一系列过程。 这称为Vue的生命周期。 简单地说，从创建Vue实例到销毁Vue实例的过程是一个生命周期。
在Vue的整个生命周期中，它提供了一系列事件，用于在事件发生时注册js方法，以及使用您注册的js方法控制全局。 这些事件响应方法中的this直接指向Vue的实例。
重绘，标记生命周期图
在这里写照片的说明
从图中看到两个节点。
在将模板渲染为html之前调用created: 这意味着通常先初始化特定属性值，然后再渲染到视图中。
在模板渲染为html之后调用mounted: 通常，在初始化页完成后，对html的dom节点执行必要的操作。
其实两者很容易理解，通常created的使用次数很多，但mounted通常像插件chart.js的使用： var CTX=document.getelementbyid (id )一样， 虽然在使用某些插件或使用组件时通常会涉及到这一步，但在写入组件时，您会发现created无法初始化chart，而是需要等待此html呈现完成。 mounted是最佳选择。 让我们看一个例子。
范例
视图播放副本
span style=’font-size:14px；’ VUE.component(‘demo1’，{ data:function ) ) return ) age: ‘，age: ‘，city:” } }， template 3360 ‘ ulli id=’ name ‘ { name }/Li Li { { age }/Li Li { { city } }/Li/ul ‘， created 3360 function ((this.name=’精明的橘子’ this.age=’12’ this.city=’杭州’ varx=document.getelementbyid ) ) mounted:function () varx=document.getelementbyid (‘ name ‘ )//span/从第三个命令盘输出的结果span style=’ font-size 330 ()； var VM=newvue ({ El : ‘ # example1’ } )/span的输出如下：
可以看出，任何一个都是通过created赋予初始值而成功绘制的。
但是同时看控制台台的话如下。
虽然出现第一个误报，但由于实际上找不到id，getelementbyid(id )由于以下原因找不到元素：
如果是created，则不会渲染视图中的html，因此，如果直接与html的dom节点进行交互，则会丢失相关元素
在mounted中，由于在这个时间点html被渲染了，所以可以直接操作dom节点，结果输出“精明的橘子”。
以上就是我自己总结的mounted和mounted的区别。 虽然写得很简陋，但请记录下来，加深印象。
特别值得注意的是，created挂钩函数与mounted挂钩函数的差异是每个挂钩函数何时被触发
beforeCreate
初始化实例后，在数据观测和事件配置之前调用。
已创建
在创建实例后调用。 在此步骤中，实例完成了数据观测、属性和方法运算以及watch/event事件回调的配置。 但是，装载阶段尚未开始，$el属性当前不可见。
缓冲装载
在装载开始之前调用。 首先调用相关的render函数。
已修改
el将被新创建的vm.$el替换，装载到实例中，然后调用挂接。
before更新
在更新数据时调用，在重新渲染和修补虚拟DOM之前发生。 可以用这个挂钩进一步更改状态。 这不会触发额外的重新渲染过程。
更新
通过数据更改重新渲染和修补虚拟DOM之后，将调用挂接。
调用此挂接时，组件DOM已更新，因此可以执行与DOM相关的操作。 但是，在大多数情况下，更新可能会导致无限循环，因此请避免在此期间更改状态。
在服务器端渲染期间不调用挂接。
beforeDestroy
在实例被销毁之前调用。 在此步骤中，实例仍然完全可用。
已损坏
在Vue实例被销毁后调用。 调用时，将解除Vue实例所表示的所有内容的绑定，删除所有事件侦听器，并丢弃所有子实例。 在服务器端渲染期间不调用挂接。
总之，我个人的初步感觉是，created挂接可以在每次加载完成时重复执行。mounted挂接只在页面第一次加载后调用，只要加载了el，然后重复该页面原文链接： https://blog.csdn.net/m0 _ 37852904/article/details/78716409