VUE—生命周期的应用场景和函数组件

博客介绍了组件生命周期分为创建、更新、销毁三个阶段,其中创建和销毁阶段各执行一次,更新阶段会执行多次,还提到了函数式组件以及在模版中需要临时变量的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

生命周期分为三个阶段:

  • 创建阶段(只会执行一次)
    在这里插入图片描述
  • 更新阶段(会执行多次)
    在这里插入图片描述
  • 销毁阶段(只会执行一次)
    在这里插入图片描述
    函数式组件
    在模版中需要临时变量是
### Vue 生命周期各阶段及钩子函数的实际应用 #### beforeCreate 阶段 `beforeCreate` 是在实例初始化完成之后,但在数据观测 (data observer) 事件配置之前调用的钩子。此阶段可以用来初始化一些未被 Vue 代理的数据或者设置全局变量。 ```javascript export default { beforeCreate() { console.log('Before Create:', this.$el); // 此时尚未挂载到 DOM 上 this.unproxiedData = {}; // 初始化未被 Vue 代理的数据 } } ``` 在此阶段,由于尚未绑定 `data` 或者 `methods`,因此无法访问它们[^2]。 --- #### created 阶段 `created` 钩子会在实例创建完成后立即调用。此时已经完成了响应式系统的初始化工作,可以通过 `this` 访问到所有的属性方法。适合用于获取初始数据或进行逻辑处理。 ```javascript export default { data() { return { message: 'Hello' }; }, created() { console.log('Created:', this.message); fetch('/api/data') // 发起异步请求获取远程数据 .then(response => response.json()) .then(data => this.processData(data)); }, methods: { processData(data) { console.log('Processing Data:', data); } } } ``` 这个阶段非常适合发起网络请求来加载页面所需的数据。 --- #### beforeMount 阶段 `beforeMount` 在模板编译成虚拟 DOM 并准备挂载到真实 DOM 前触发。此时可以修改虚拟 DOM 结构而不影响真实的 DOM 渲染性能。 ```javascript export default { template: '<div>{{ title }}</div>', data() { return { title: 'Initial Title' }; }, beforeMount() { this.title = 'Updated Before Mount'; // 修改即将渲染的内容 } } ``` 该阶段通常不涉及复杂操作,主要用于调试或优化虚拟 DOM 的结构[^1]。 --- #### mounted 阶段 当组件成功挂载到 DOM 后会触发 `mounted` 钩子。这是最常用的生命周期之一,常用于启动定时器、订阅消息总线或其他需要依赖于已存在的 DOM 节点的任务。 ```javascript export default { mounted() { const element = document.querySelector('#app'); console.log('Mounted Element:', element); setInterval(() => { console.log('Timer Triggered!'); }, 1000); } } ``` 注意,在服务端渲染环境中可能不会触发 `mounted`,因为不存在浏览器环境下的 DOM 操作。 --- #### beforeUpdate 阶段 每当数据变化引起视图重新渲染前都会触发 `beforeUpdate`。如果希望在更新发生前后对比某些状态,则可以选择在这里记录旧的状态以便后续比较分析。 ```javascript export default { data() { return { count: 0 }; }, beforeUpdate() { console.log(`Count is about to change from ${this.count}`); }, methods: { increment() { this.count++; } } } ``` 利用这一特性可以帮助开发者更好地理解组件内部的变化流程。 --- #### updated 阶段 一旦视图完成更新就会进入 `updated` 状态。需要注意的是,这里可能会遇到无限循环的风险——即再次更改数据又引发新的更新周期。 ```javascript export default { data() { return { name: '' }; }, updated() { if (!this.name.trim()) { alert('Name cannot be empty after update.'); } }, methods: { setName(newName) { this.name = newName; } } } ``` 谨慎使用本阶段的功能以免造成不必要的副作用。 --- #### beforeDestroy / beforeUnmount 阶段 在组件销毁之前执行清理工作的最佳时机就是 `beforeDestroy`(Vue 3 称之为 `beforeUnmount`)。比如清除计时器、解绑自定义事件监听器等资源释放动作都应放于此处。 ```javascript export default { destroyed() { clearInterval(this.timerId); window.removeEventListener('resize', this.handleResize); }, created() { this.timerId = setInterval(() => {}, 1000); window.addEventListener('resize', this.handleResize.bind(this)); } } ``` 确保所有动态分配给外部对象上的回调都能及时解除绑定以防内存泄漏。 --- #### destroyed/unmount 阶段 最后一步便是彻底移除当前实例并停止其活动。任何残留的影响都将消失不见。 ```javascript export default { unmounted() { console.log('Component has been fully removed.'); } } ``` 至此整个生命周期结束。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值