GuLi商城-前端基础Vue-生命周期和钩子函数

GuLi商城-前端基础Vue-生命周期和钩子函数_第1张图片

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它

的参考价值会越来越高。 

GuLi商城-前端基础Vue-生命周期和钩子函数_第2张图片

VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件,通过这些事件可以

让开发者在不同阶段进行相应的逻辑处理。VUE 组件的生命周期分为 8 个阶段:

  • beforeCreate:组件实例刚被创建,但是数据还未初始化。在这个阶段,无法访问到 data 和 methods 等组件属性。
  • created:组件的数据已经初始化完成,但是 DOM 元素还未生成。可以进行一些异步操作,如发送 AJAX 请求获取数据等。
  • beforeMount:组件即将被挂载到页面上。在这个阶段,所有的模板和组件都已经编译成 render 函数,并准备好渲染。
  • mounted:组件已经挂载到页面上,此时可以访问到组件的 DOM 元素。可以进行一些需要访问 DOM 元素的操作,如使用第三方插件等。
  • beforeUpdate:组件更新之前被调用,在此时可以对组件进行更新前的状态和数据进行处理。
  • updated:组件更新完毕后被调用。在此阶段中不能再更新组件的数据,否则会导致死循环。
  • beforeDestroy:组件即将被销毁,在此时可以进行一些清理工作,如清除定时器、解绑事件等。
  • destroyed:组件已经被销毁,此时所有的事件监听和子组件都已经被移除。

掌握 VUE 组件的生命周期可以帮助开发者更好地理解组件的运行机制,在不同阶段进行相应的逻

辑处理,从而实现更加灵活、高效的组件开发。

Vue到底是什么?优缺点是什么? - 知乎


GuLi商城-前端基础Vue-生命周期和钩子函数_第3张图片

GuLi商城-前端基础Vue-生命周期和钩子函数_第4张图片





    
    
    
    Document



    
{{num}}

{{name}},有{{num}}个人点赞

 

你可能感兴趣的:(GuLi商城,前端,vue.js,javascript)