首页 > 其他分享 >vue生命周期

vue生命周期

时间:2024-03-16 21:23:13浏览次数:15  
标签:生命周期 销毁 实例 周期函数 vue 此时 data

 

什么是生命周期:Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!

生命周期钩子 = 生命周期函数 = 生命周期事件

主要的生命周期函数分类:

  • 创建期间的生命周期函数:

    • beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
    • created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板

    • beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中

    • mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示

  • 运行期间的生命周期函数:

    • beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点。

    • updated:实例更新完毕之后调用此函数,此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

  • 销毁期间的生命周期函数:

    • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

    • destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

 

标签:生命周期,销毁,实例,周期函数,vue,此时,data
From: https://www.cnblogs.com/wuyunna/p/11284877.html

相关文章

  • Vue+SpringBoot打造教学过程管理系统
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1教师端2.2学生端2.3微信小程序端2.3.1教师功能如下2.3.2学生功能如下三、系统展示四、核心代码4.1查询签到4.2签到4.3查询任务4.4查询课程4.5生成课程成绩六、免责说明一、摘要1.1项目介绍基......
  • Vue+SpringBoot打造音乐平台
    ``目录一、摘要1.1项目介绍1.2项目录屏二、功能模块三、系统展示四、核心代码4.1查询单首音乐4.2新增音乐4.3新增音乐订单4.4查询音乐订单4.5新增音乐收藏五、免责说明一、摘要1.1项目介绍基于微信小程序+JAVA+Vue+SpringBoot+MySQL的音乐平台,包含了......
  • 第一个Vue3程序
     上一个作品是Vue2的代码,这个是Vue3,引入时候不一样<!DOCTYPEhtml><html><head><title>Vue.js示例</title><!--引入Vue.js--><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>......
  • 说说如何在Vue项目中应用TypeScript?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、前言与link类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,其是基于vue-class-component库而来,这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库主要的功能如下:......
  • 微信小程序(生命周期)
          ......
  • Nginx部署vue项目刷新返回空白页问题
    这个问题很有可能是因为VueRouter的模式和Nginx配置之间的冲突导致的。当你在Vue应用中使用VueRouter的`history`模式时,URL会变成美观的形式,就像`http://mywebsite/myroute`,而不是`http://mywebsite/#/myroute`。这种模式下,当你尝试通过直接访问`http://mywebsite......
  • Vue3-03_组件基础_上
    单页面应用程序什么是单页面应用程序单页面应用程序(英文名:SinglePageApplication)简称SPA,顾名思义,指的是一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序的特点单页面应用程序将所有的功能局限于一个web页面中,仅在......
  • 如何在vue的style标签中使用js?
    这是面试的时候遇到的一个面试题,当时没回答上来。。。var()-CSS:层叠样式表|MDN自定义属性(--*):CSS变量-CSS:层叠样式表|MDN我们先了解一下cssvar()函数以及css自定义属性通过var函数和自定义属性可以复用某些css样式,例如::root{--main-bg-color:pink;}b......
  • 基于Spring Boot+Vue的校园二手交易平台
    目录一、绪论1.1开发背景1.2系统开发平台1.3系统开发环境二、需求分析2.1问题分析2.2系统可行性分析2.2.1技术可行性2.2.2操作可行性2.3系统需求分析2.3.1学生功能需求2.3.2管理员功能需求2.3.3游客功能需求三、系统设计3.1功能结构图3.2E-R模型3.3数......
  • vue3+ts 上传组件
    本来是用的jeecg-vue3中的上传组件,如下图: 功能上还是蛮全的,就是上图中这个链接的代码死活找不到,查了下,是基于antv的a-upload实现的。但是antv中也没找到,上图这个只有移入删除的功能但是我这边的需求是点击链接可以直接在网页预览,而不是下载,移入后有个删除和下载的功能按钮。......