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

Vue生命周期

时间:2024-05-31 16:43:50浏览次数:16  
标签:updated 生命周期 渲染 Vue 组件 数据 监听 页面

1. beforeCreate

初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

2. created
初始化界面后 : 在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数,也就是不会更新视图,SSR可以放这里。

3. beforeMount
挂载前 :完成模板编译,虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。

4. mounted
挂载完成 : 将编译好的模板挂载到页面 (虚拟DOM挂载) ,可以在这进行异步请求以及DOM节点的访问,在vue用$ref操作。

5. beforeUpdate
更新数据前 : 组件数据更新之前调用,数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面 , 可以在当前阶段进行更改数据,不会造成重渲染。

6. updated
组件更新后 : render重新渲染 , 此时数据和界面都是新的 ,要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。

7. beforeDestroy
组件卸载前 : 实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器。

8. destroyed
组件卸载后 : 组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。

9. activited
keep-alive 专属 , 组件被激活时调用。

10. deactivated
keep-alive 专属 , 组件被销毁时调用。

渲染(执行)顺序如此排序。

初次渲染就会触发的生命周期:

beforeCreate() -> created() -> beforeMount() -> mounted() -> updated()

完整的页面加载过程:

beforeCreate() ->onLoad()->onShow()-> created() -> beforeMount()->onReady() -> mounted() -> updated()

红色部分注意,在页面的渲染位置。

除了 Vue 的生命周期之外,uniapp 也有一套自己的页面生命周期 ,它们依然和 data 等方法同级
onInit(){}  监听页面初始化
onLoad(options){}   监听页面的加载 :它的参数是上个页面所传递的数据,参数类型是对象类型(用于页面之间的传参)
onShow(){}  监听页面的显示:页面每次出现在屏幕上都会触发,包括从下级页面点返回露出当前页面

onReady(){}  监听页面初次渲染完成
onHide(){} 监听页面的隐藏

onUnload(){}  监听页面的卸载
onResize(){}   监听窗口尺寸变化:仅支持:App、微信小程序、快手小程序
onPullDownRefresh(){}  监听用户下拉动作:比如下拉刷新
uni.stopPullDownRefresh(){}  将停止页面的刷新动作
onReachBottom(){}  页面滚动到底部

标签:updated,生命周期,渲染,Vue,组件,数据,监听,页面
From: https://www.cnblogs.com/x1yun/p/18224831

相关文章

  • vue项目部署后刷新页面404的原因和解决方案
    在部署Vue.js单页面应用(SPA)时,遇到刷新页面时返回404错误是一个常见问题。这个问题通常是由于服务器不知道如何处理SPA的路由而导致的。原因在Vue.jsSPA中,前端路由由VueRouter处理。当你在应用中导航时,VueRouter可以处理这些路由并加载相应的组件。但是,当你直接刷......
  • 从0到1写一个vue2官网项目(一)
    1、安装npm9.5.1和node18.16.0(略)2、sudonpminstall-g@vue/cli 选vue23、pnpmi然后pnpmrunserve4、跑vue项目如果报错: ERROR Failedtocompilewith2errors                                           17:33......
  • Vue 3 + TypeScript:构建强大前端应用的完美组合
    在前端开发的领域中,Vue3和TypeScript的结合正成为一种强大且流行的技术栈。今天,让我们深入探讨Vue3+TypeScript所带来的诸多优势和实践经验。一、Vue3的卓越特性Vue3引入了众多令人瞩目的新特性,如更好的性能、更灵活的组合式API等。这些特性使得我们能够以......
  • Vue devDependencies 与 dependencies 能别
    VuedevDependencies与dependencies能别,如何往项目的node_modules安装组件概述devDependencies用于本地环境开发只会在开发环境下依赖的模块,生产环境不会被打入包内(通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境)dependencies用户发布环境......
  • vue3毫秒级时间戳转换
    Unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒。以下2个方法源自于时间工具包:timeutils效果展示:在线时间戳转换工具时间转时间戳/***将某个时间转化成时间戳*时间格式:2019-05-2000:00:00或2019年5月1日00:00:00*返回值:1556640000000,13......
  • vue3 vite 脚手架生成项目 prettier 自动格式化失败 vscode插件 Vue - Official 解决
    vue3vite脚手架生成项目prettier自动格式化失败vscode插件Vue-Official解决方案问题以前写的都是vue2的项目,自动格式化都用的vetur,都设置好了。现在新弄了个vue3的项目,脚手架起的vitevue3,搞个代码格式化,发现prettier没好事。解决思路格式化一共俩工具eslintpret......
  • 265:vue+openlayers 一次性清除所有控件(亲测好用)
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为GIS领域高级前端工程师;CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第265个示例文章目录一、示......
  • vue 导出xlsx (报错./cptable in ./node modules/xlsx-style/dist/cpexcel.js)
    安装 xlsx 和  xlsx-stylesrc下创建文件夹utils, utils文件夹下创建index.js文件,index.js文件内容如下:*CreatedbyAnqion16/11/18.*//***Parsethetimetostring*@param{(Object|string|number)}time*@param{string}cFormat*@returns{stri......
  • VUE卖座网
      免费获取方式↓↓↓   项目介绍033:项目名:卖座网技术栈:VUE网址:http://localhost:8080/功能(前端数据都为静态假数据,仅展示,实现动态需自行搭建后端)电影正在上映即将上映影院全城app订票最近去过资讯我的 二、技术栈 所有场景都支持适合零基础小......
  • vue小白商城
      免费获取方式↓↓↓   项目介绍034:npminstallnpmrunservenpmrunbuild主要功能小白商城首页我的消息收藏夹购物车卖家中心联乐客服关于我们 二、技术栈 所有场景都支持适合零基础小白练手和实战;适合二次开发;项目图片概览:以上是对本项目的界面......