Vue 生命周期钩子
240 字
1 分钟
Vue 生命周期钩子
（1）创建阶段
组件实例被初始化，但 DOM 还未渲染，可以在这阶段进行数据初始化、调用 API 获取数据等操作。
| 钩子 | 说明 |
|---|---|
beforeCreate() | 数据和事件都未初始化，只能访问 methods 但无法访问 data、computed。 |
created() | 实例创建完成，data 已初始化，可以进行 异步请求，但 DOM 还未渲染。 |
（2）挂载阶段
组件被挂载到 DOM，此时可以进行 DOM 操作 或者 获取 DOM 元素。
| 钩子 | 说明 |
|---|---|
beforeMount() | 模板已编译，但虚拟 DOM 还未挂载到真实 DOM，可以操作 data，但不能操作 DOM。 |
mounted() | 组件 已挂载到真实 DOM，可操作 DOM、进行 AJAX 请求。 |
（3）更新阶段
当 data 发生变化时，Vue 组件会重新渲染。
| 钩子 | 说明 |
|---|---|
beforeUpdate() | 组件 更新前 触发，数据已经改变 但 DOM 还未更新。 |
updated() | 组件 更新后 触发，DOM 已更新，可以执行依赖更新 DOM 的操作。 |
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
Vue v-bind 动态属性绑定
前端开发v-bind 将 JavaScript 表达式绑定到 HTML attribute 的用法。
2
Vue 组件属性 Props
前端开发Props 父子传值的基础用法、类型校验、默认值与必填约束。
3
Vue v-model 双向数据绑定
前端开发v-model 指令在表单控件与组件间同步数据的作用、特点与 Vue 3 自定义绑定。
4
Grafana 可视化与监控
云原生与运维Grafana 的定位、常见数据源与 Grafana + Prometheus 经典监控链路。
5
微服务之间如何传递 trace
后端开发跨服务传递的是 trace 上下文而非 tracer：HTTP header、gRPC metadata 与 MQ 消息头的标准做法。
随机文章随机推荐