vue中created和mounted的区别关于vue.js中的生命周期，如果没有特殊要求，一般在项目开发过程中会用到更多的created和mounted，所以在本文主要讲解created和mounted在开发中的主要区别。关于完整的生命周期，我很快会在另一篇文章中做一个整体的了解，包括activated、destroyd等，但可能会晚一些。大家可以关注下版本信息：system:win10Vue:2.5.2webpack:3.6.0npm:6.9.0node:10.15.3Lifecycle完整的生命周期图标这里就不贴了，以免占版面。可以自己去vue生命周期查看。浏览器渲染过程具体的浏览器渲染过程我过几天再写一篇文章，大家可以去我的文章看看。构建DOM树构建css规则树，按照执行顺序解析js文件。构建渲染树RenderTree渲染树layoutrenderingtreedrawingbrowserrenderinginthelifecycle这里有官方文档讲解生命周期api，可以看下面测试vue部分的生命函数beforeCreate(){console.log('beforecreate:',document.getElementById('first'))//nullconsole.log('data:',this.text);//undefinedthis.sayHello();//error:notafunction},created(){console.log('create:',document.getElementById('first'))//nullconsole.log('data:',this.text);//this.textthis.sayHello();//this.sayHello()},beforeMount(){console.log('beforeMount:',document.getElementById('first'))//nullconsole.log('data:',this.text);//这。textthis.sayHello();//this.sayHello()},mounted(){console.log('mounted:',document.getElementById('first'))//
console.log('data:',this.text);//this.textthis.sayHello();//this.sayHello()}通过上面的测试，我们可以知道生命周期是否获取了dom节点，是否获取了data是否可以获取到方法beforeCreateNoNoNoCreatedNoYesYesbeforeMountNoYesYesMountedYesYes个人理解，Vue的生命周期其实是和浏览器渲染过程挂钩的。在beforecreate阶段，浏览器还没有开始整个渲染过程。或者准备启动，对于vue来说，实例还没有初始化，dataobserver和事件/观察者尚未被调用。在这个阶段，对数据、方法或文档节点的调用无法得到正确的数据。在created阶段，对于浏览器来说，在渲染整个HTML文档时，dom节点，css规则树等js文件解析完成后，还没有进入浏览器的渲染进程，上面的资源还没有挂载到页面，也就是在vue生命周期对应的created阶段，实例已经初始化，但是还没有挂载到$el，所以我们无法获取到对应的节点，但是此时我们可以获取到其中的数据vue中的数据和方法。在beforecreate阶段，其实和created阶段类似。节点还没有挂载，但是还是可以获取到的。数据和方法中的数据。在mounted阶段，对于浏览器来说，dom和css规则树的渲染已经完成，渲染树的布局也已经完成。浏览器收到这条指令后，调用渲染器的paint()显示到屏幕上，而对于vue来说，在mounted阶段，vue的模板成功挂载到$el中，此时可以在浏览器中显示一个完整的页面，所以这个阶段就可以调用节点了（关于这点，笔者测试中，在mounted方法中打断点再运行，在浏览器中依然可以看到整体页面）。写在最后，作者目前只是一个职场小白。我将简要谈谈我的看法。如果您对文章有任何疑问或错误，可以在评论中指出，我们一起讨论。