共计 1782 个字符,预计需要花费 5 分钟才能阅读完成。
vue 中 created 与 mounted 的区别
关于 vue.js 中的生命周期,如果不是有特别的需求,一般在项目开发过程中更多的使用 created 和 mounted,
所以在本文中主要讲解 created 与 mounted 在开发中的主要使用区别。
关于完整的生命周期,不久会在另一篇文章中做整体的理解,包括 activated、destroyed 等,不过可能会有点晚,大家可以留意一下
生命周期
完整的生命周期 图示为了避免占用板块,这里就不贴出来了,大家可以自行前往 vue 生命周期查看。
浏览器渲染过程
具体的浏览器渲染过程我会过几天另外写一遍文章,大家可以去我的文章看看。
- 构建 DOM 树
- 构建 css 规则树, 根据执行顺序解析 js 文件。
- 构建渲染树 Render Tree
- 渲染树布局 layout
- 渲染树绘制
生命周期中的浏览器渲染
这里是官方文档对生命周期 api 的解释,大家可以看看
以下为测试 vue 部分生命函数
beforeCreate(){console.log('beforecreate:',document.getElementById('first'))//null
console.log('data:',this.text);//undefined
this.sayHello();//error:not a function},
created(){console.log('create:',document.getElementById('first'))//null
console.log('data:',this.text);//this.text
this.sayHello();//this.sayHello()
},
beforeMount(){console.log('beforeMount:',document.getElementById('first'))//null
console.log('data:',this.text);//this.text
this.sayHello();//this.sayHello()
},
mounted(){console.log('mounted:',document.getElementById('first'))//<p></p>
console.log('data:',this.text);//this.text
this.sayHello();//this.sayHello()
}
通过上述测试我们可以知道,
生命周期 | 是否获取 dom 节点 | 是否可以获取 data | 是否获取 methods |
---|---|---|---|
beforeCreate | 否 | 否 | 否 |
created | 否 | 是 | 是 |
beforeMount | 否 | 是 | 是 |
mounted | 是 | 是 | 是 |
以我的个人理解,vue 生命周期 实际上和 浏览器渲染过程 是挂钩的,
在 beforecreate 阶段,对浏览器来说,整个渲染流程尚未开始或者说准备开始,对 vue 来说,实例尚未被初始化,data observer 和 event/watcher 也还未被调用,在此阶段,对 data、methods 或文档节点的调用现在无法得到正确的数据。
在 created 阶段,对浏览器来说,渲染整个 HTML 文档时,dom 节点、css 规则树与 js 文件被解析后,但是没有进入被浏览器 render 过程,上述资源是尚未挂载在页面上,也就是在 vue 生命周期中对应的 created
阶段,实例已经被初始化,但是还没有挂载至 $el 上,所以我们无法获取到对应的节点,但是此时我们是可以获取到 vue 中 data 与 methods 中的数据的
在 beforecreate 阶段,实际上与 created 阶段类似,节点尚未挂载,但是依旧可以获取到 data 与 methods 中的数据。
在 mounted 阶段,对浏览器来说,已经完成了 dom 与 css 规则树的 render,并完成对 render tree 进行了布局,而浏览器收到这一指令,调用渲染器的 paint()在屏幕上显示,而对于 vue 来说,在 mounted 阶段,vue 的template 成功挂载在 $el 中,此时一个完整的页面已经能够显示在浏览器中,所以在这个阶段,即可以调用节点了(关于这一点,在笔者测试中,在 mounted 方法中打断点然后 run,依旧能够在浏览器中看到整体的页面)。
写在最后
笔者目前也只是一个职场小白,粗略探讨一下自己的看法,若有疑问,或者文章错误,都可以在评论中指出,我们一起讨论