Vue生命周期中对mounted、beforeUpdate、updated的理解

前言

以下文章纯为个人理解，如有错误，请求评论区指正呀！

2021.6.21新增
最近又发现一处关于updated的我用的不对的地方，在项目中我的本意是，当用户登录后，就可以获取到全部帐号，我控制台输出测试了一下，刚好提交完表单，即确认登录后，可以触发 updated() 的生命周期，十分开心的打算把获取帐号的函数在updated()里面引用，不是打算，已经这么写了 ，结果页面死循环一样输出我console.log(‘updated’)的updated，页面直接卡掉了，我只能强制关闭网页。所以不要在 updated() 生命周期里更改状态等，会死循环的！

之后发现完全可以用 @onmouseenter事件，就会不需要写在updated里面了，整个代码和页面也合理一些，被自己蠢哭 😦

—————————————————————
2021.6.17

（如果想直接看正文内容可以直接跳过这一部分）

Vue生命周期的八个钩子函数想必大家都不陌生，但我一直都只是做简单了解，知道大概的意思，Vue官方文档里的图也看过很多遍，但一直不太理解，从前我在写项目中时如果需要用到生命周期函数，大多写在created和mounted中，也没怎么出过问题，直到我的上一篇文章中分享的Vue 全局监听键盘事件。

在今天打算提交代码时，发现只有一个页面好使，另一个页面调用我的组件时，无法用键盘控制图表的切换，但页面上的按钮是可以的，经过我多次测试，发现我在函数中为data里面的params赋的数组，在mounted中还是初始值，根本没有接收到我存的数据。

最后我将mounted改为updated成功解决了这个问题。这引发了我对生命周期中mounted、beforeUpdate、updated的思考。

mounted、beforeUpdate、updated

• mounted 直译就是挂载完毕，它表示的应当是已经渲染完毕了，具体的页面已经呈现出来了，内存中的模版成功挂载到页面
• beforeUpdate 直译就是更新前，它表示的应当是页面有某处即将更新时触发，但此时，页面并没有更新，由数据更新得知即将更新的信息，页面没有和data中的数据保持一致
• updated 直译就是更新后，它表示的应当是页面与data中数据保持一致的状态，数据更新，页面也更新结束的状态

由上可以分析，当mounted结束以后，一个完整的页面也结束了，当这个页面或数据再没有任何变化时，就不会执行其他函数了，该实例已经被完全创建好了。一旦有某个数据发生了变化，便会立即触发beforeUpdate，当页面也更新结束便会触发updated。

所以我在上一篇文章中，把监听全局键盘事件写在mounted里面是不太合理的，因为即使没有触发键盘事件，我的页面也已经形成了，而当我敲击键盘时，页面需要更新，故这一段代码应当写到updated里面，当我修改后，之前的bug也消失了！快乐！

😃 😃 😃 😃 😃 😃 😃 😃 😃 😃 😃 😃 😃 😃 😃


更于2021.6.21