vue生命周期及mounted和created的区别

Posted 2023-05-18

参考技术A

create 和 mounted 相关

另外在标红处，我们能发现el还是 message，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

这里我们在 chrome console里执行以下命令

下面就能看到data里的值被修改后，将会触发update的操作。

有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

这么多钩子函数，我们怎么用呢，我想大家可能有这样的疑问吧，我也有，哈哈哈。

我们从图中看两个节点：

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

可以看到输出如下：

可以看到都在created赋予初始值的情况下成功渲染出来了。

但是同时看console台如下：

可以看到第一个报了错，实际是因为找不到id，getElementById(ID) 并没有找到元素，原因如下：
在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，故输出了上图结果。

以上就是我自己总结的mounted和mounted的区别，写的比较简陋，记录下来，加深印象。

vue生命周期函数created与mounted执行顺序

参考技术A created
为第二个生命周期函数，在 created 中，data 和 methods 都已经被初始化好了！ 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

mounted
为第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 ##mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
此时，表示vue实例已经初始化完毕了，组建已脱离创建阶段，进入运行阶段了。

执行顺序：
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。