每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码

注册周期钩子

mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码。

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

最常用的是:mountedupdatedunmounted

所有生命周期钩子函数的this上下文都会自动指向当前调用它的组件实例。

注意:

避免用箭头函数来定义生命周期钩子,因为如果这样的话将无法在函数中通过 this 获取组件实例。

生命周期图示

组件生命周期图示

文章作者: Sleny
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 咸鱼说
Vue Vue
喜欢就支持一下吧
打赏
微信 微信
支付宝 支付宝