• Vue生命周期和考点


    一、vue单个组件生命周期

    生命周期阶段

    生命周期的三个阶段:挂载阶段(1~4)、更新阶段(5~6)、销毁阶段(7~8);

    beforeCreate create beforeMount mounted beforeUpdate updated beforeDestroy destroyed

    考点:1、create 和 mounted 区别

    beforecreated:el 和 data 并未初始化 
    created:完成了 data 数据的初始化,el没有
    beforeMount:完成了 el 和 data 初始化 
    mounted :完成挂载

    总结:creat是吧vue实例初始化,但是并没有渲染,mounted是真正页面渲染了

    2、beforeDestory都做什么

    解除绑定、销毁子组件以及事件监听器

    二、父子组件,生命周期

      用create 和 mounted updated 说明

    1、初始化,创建实例是从父组件到子组件,渲染是从子组件到父组件
      父created => 子created => 子 mounted => 父 mounted

    2、数据更新
      父beforeUpdate => 子beforeUpdate => 子updated => 父updated

    生命周期总结

    beforecreate : 举个栗子:可以在这加个loading事件 
    created :在这结束loading,还做一些初始化,实现函数自执行 
    mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
    beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

     

    三、js生命周期

    onbeforeunload: 
    
      事件在即将离开当前页面(刷新或者关闭)时触发。改事件可用于提醒用户是继续浏览网页还是离开当前页面。
    
    页面加载是只执行 onload 。
    
    页面关闭时先执行 onbeforeunload ,最后 onunload。
    
    页面刷新时先执行 onbeforeunload,然后 onunload,最后 onload
  • 相关阅读:
    一步步介绍如何给项目添加单元测试
    日期格式化在移动端的问题
    使用VW时,图片的问题
    转:vw适配中使用伪类选择器遇到的问题
    ES6模块的import和export用法总结
    转:如何在Vue项目中使用vw实现移动端适配
    PhpStrom添加调试功能
    小程序商城笔记
    使用TortoiseGit对android studio工程进行代码版本控制
    Android Studio 常见异常解决办法
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/9371119.html
Copyright © 2020-2023  润新知