浏览器渲染顺序:
1. 解析 HTML,构建 DOM 树;
2. 解析 CSS,构建 CSSOM 树;
3. 将 DOM 树和 CSSOM 树结合,生成渲染树;
4. 根据渲染树进行布局,计算每个元素的大小和位置;
5. 将渲染树绘制到屏幕上。Vue 组件生命周期:
1. beforeCreate:组件实例初始化之后,数据观测和事件配置之前被调用。
2. created:组件实例创建完成后被调用。此时已经完成了数据观测和事件配置等,但还没有开始 DOM 编译和挂载。
3. beforeMount:组件挂载之前被调用,此时组件的模板已经编译完成,但尚未挂载到页面上。
4. mounted:组件挂载完成后被调用,此时组件已经完全被渲染到页面中。
5. beforeUpdate:组件更新之前被调用,但此时DOM并未被重新渲染。
6. updated:组件更新完成后被调用,此时DOM已经被重新渲染。
7. activated:被 keep-alive 缓存的组件激活时调用。
8. deactivated:被 keep-alive 缓存的组件停用时调用。
9. beforeDestroy:组件销毁之前被调用,此时组件仍然可用。
10. destroyed:组件销毁后被调用,调用后组件已经不能被使用。Vue2项目运行在浏览器时,渲染顺序如下:
- 初始化阶段:
- Vue实例被创建,响应式数据和计算属性被初始化。
- 如果定义了
beforeCreate
钩子函数,它将在此阶段被调用。
- 编译模板:
- Vue会编译模板,将模板解析成虚拟DOM(Virtual DOM)。
- 解析过程中,会识别模板中的指令、事件绑定、插值等。
- 创建实例阶段:
- Vue实例的生命周期进入
created
阶段,此时实例已经创建,数据已经初始化,但尚未挂载到DOM上。
- 模板渲染:
- Vue会将虚拟DOM渲染成真实的DOM。
- 此时,如果定义了
beforeMount
钩子函数,它将在此阶段被调用。
- 挂载阶段:
- Vue实例的生命周期进入
mounted
阶段,此时虚拟DOM已经渲染成真实DOM并挂载到页面上。- 在这个阶段,你可以操作DOM,访问组件的DOM元素。
- 更新阶段:
- 当响应式数据发生变化时,Vue会触发更新过程,这会导致重新渲染组件。
- 在更新过程中,Vue会先进行虚拟DOM的比对(Diff算法),找出需要更新的部分,然后再更新真实DOM。
- 如果定义了
beforeUpdate
钩子函数,它将在此阶段被调用。
- 重新渲染:
- 更新后,Vue会将新的虚拟DOM渲染成新的真实DOM,替换旧的DOM。
- 此时,如果存在被替换的子组件,子组件会经历更新流程。
- 更新完成阶段:
- 更新完成后,Vue实例的生命周期进入
updated
阶段。- 在这个阶段,你可以执行一些与更新后的DOM交互的操作。
- 销毁阶段:
- 当Vue实例被销毁(调用
$destroy
方法),实例的生命周期进入beforeDestroy
和destroyed
阶段。- 在
beforeDestroy
阶段,你可以执行一些清理工作,解绑事件等操作。
vueh渲染element组件 vue组件渲染顺序
转载文章标签 vueh渲染element组件 前端 javascript vue.js Vue 文章分类 机器学习 人工智能
-
linux创建test
目 录 第1章 用户和组存在的关系 1 1.1 我们现在所使用的操作系统都是多用户操作系统 1 1.2 id命令查看当前登陆的用户信息 1 1.3 用户UID的分类 1 1.
linux创建test bash 用户信息 普通用户