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

vue 的生命周期

时间:2022-10-17 20:24:12浏览次数:60  
标签:生命周期 销毁 数据 vue 阶段 data 页面

生命周期有 4 个阶段 :创建阶段---挂载阶段---更新阶段---销毁阶段,每个阶段 2 个钩子函数 ;

创建阶段 

  beforecreate 创建一个空的vue实列对象,此时data和methods的数据没有初始化

  created data 和 methods 的数据已经初始化,常在这个函数发起数据请求 ;

挂载阶段 

  beforemount 此时内存中已经编译好了页面dom结构,但是没有挂载到页面 ;

  mounted 此时把编译好的dom模板挂载到页面 ,此时可以对dom进行操作了 ;

更新阶段 

  beforeupdate 页面的数据和data的数据没有保持同步 ;

  updated 数据驱动视图 ,页面的数据和data的数据保持了同步 ;

销毁阶段 

  beforedestroy vue 实例从运行状态 进入 销毁 状态,但是未真正的销毁 ;

  destroyed vue 实例完全销毁,vue实列的组件,数据,方法,过滤器等都不可使用了 ;

标签:生命周期,销毁,数据,vue,阶段,data,页面
From: https://www.cnblogs.com/zhulongxu/p/16800486.html

相关文章

  • vue-element-admin 介绍
    ​简介vue-element-admin是一个后台集成解决方案,它基于vue和element。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了......
  • 前端Vue2-Day53
    修改默认配置:使用vue>output.js可以查看到Vue脚手架的默认配置。在vue.config.js中进行修改。eg:lintOnSave:false//关闭语法检查 脚手架文件结构: ref属性:被用来......
  • vuex是什么
    Vuex是vue框架中状态管理工具;状态管理就是全局的状态工具,如何组件都可以获取状态(state)或者触发行为(mutations); 好处:存储token,单页应用中,组件之间的数据状态。可以做......
  • vue 的响应式原理
    通过Obejct.defineProperty定义数据,给数据加上geter和setter,获取数据和触发getter设置数据触发setter,从而实现数据的监听;通过发布订阅模式进行依赖收集与视图......
  • vue3中的defineProps,watch,computed
    在vue3的setup语法糖中,defineProps不需要引入了<scriptsetup>import{computed}from'@vue/reactivity';import{onMounted,watch}from'vue';letprops=de......
  • @vitejs/plugin-vue
      需要cmd命令下载,我指定的版本是1.0.0,这里需要的node版本的要>=12.0.0 而我的vue版本是3.04>npmi@vitejs/[email protected] 以下的@vitejs/plugin-vue的......
  • vue项目Eslint和prettier结合使用
    一、eslint介绍——代码语法检查工具Eslint是一个代码检查工具,用来检查你的代码语法是否符合指定的规范,ECMAScript标准二、prettier插件——代码格式化工具prettier是......
  • 解决vuex刷新页面数据丢失问题(数据持久化)
    1、为什么刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是......
  • vue+elementui 的表格单元格内修改数据
    cellDbClick(row,column,cell,event){   varthat=this     event.target.innerHTML=''     varcellInput=document.createElem......
  • vue中 动态改变CSS样式
    需求:我想要动态改变css样式。我当前的应用场景:如果我用绝对定位给每个标签添加一个‘*号’,但是每个标签所需‘*号’的位置需要不一样,我希望写一个css样式,来迎合不同的尺寸......