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

Vue的生命周期

时间:2023-01-05 10:15:02浏览次数:45  
标签:生命周期 methods 自定义 DOM vm Vue 页面

1.beforeCreate: 无法通过vm,访问data,和methods。

2.created: 可以通vm,访问data和methods的方法。

3.beforeMount : (1).生成未经vue编译的DOM结构,

                          (2).所有对DOM的操作,最终不生效。

4.mounted: (1).生成经Vue编译的DOM,对DOM的操作均有效,但尽力避免。

                    (2).可以进行发送网络请求,开启定时器,绑定自定义事件。

5.beforeUpdate : (1).数据是新的,但页面是旧的,(即数据与页面未保持同步)。

6.updated: (1)数据是新的,页面也是新的(即页面与数据保持同步)

7.beforeDestroy :(1)vm实例,销毁之前,所有的data,methods指令都可用,

                           (2)在这一阶段,可以关闭定时器,解绑自定义事件等操作。

8.destroyed:(1)实例销毁,定时器,自定义事件,均无法使用。

 

 

 

标签:生命周期,methods,自定义,DOM,vm,Vue,页面
From: https://www.cnblogs.com/StevenYF/p/17026735.html

相关文章

  • 基于vue+Element Table 表格的封装
    项目场景:项目场景:需要频繁使用列表进行呈现数据,不可能每次都写一个表格,可以将表格封装为一个组件,在需要使用时可以直接调用。效果展示:项目结构:具体实现:Table.vue......
  • Vue项目创建
    一、创建项目1.安装淘宝镜像npmi-gcnpm--registry=https://registry.npm.taobao.org2.安装vue的脚手架工具npmi-gvue-cli3.测试vue-V4.初始化包结构vuein......
  • Vue-Router
    Rouer组件可以构造单页引用多页应用:mpa每一个页面都是一个html文件方便seo优化单页应用:spa知乎网站掘进百度移动端单页用于取决情况:1.用户群体比较......
  • Vuex使用
    Vuexvuex是专为vue.js应用程序开发的管理模式,它采用集中式储存管理应用的去全部组件状态,并以响应的规则邦正状态可以以一种可预测的方式变化​​主要管理数据​使用......
  • vite+vue3使用transition
    一番操作发现切换路由竟然没效果,控制台打印了警告原因是确实根节点,按照如下方式解决,可以愉快的进行路由切换了......
  • 【Vue】常见问题(一)找不到模块“./App.vue”或其相应的类型声明。ts(2307)
    vue+vite项目,打开找不到模块  解决办法:在根目录下创建jsconfig.json文件,进行如下配置:  {"compilerOptions":{"baseUrl":"./","pat......
  • vue数据大屏适配
    1、不管使用的是px,还是百分比,均可通过css3中提供的scale方法,来达到适配多端。//屏幕适配mixin函数//*默认缩放值constscale={width:'1',height:'1',......
  • vue-cli
    vue-clivue-cli是官方提供的一个脚手架,用于快速生成vue项目模板一、安装node.js安装好后可在cmd中输出node-v/npm-v查看安装node.js淘宝镜像加速器:npmintstallcnm......
  • vue的set()方法
    $set对vue双向绑定的。有时候数据是单项的当第二个部分为真的时候,然后将第三部分替换或添加进去。第一个是添加,添加到数组末尾。之后的是替换。什么看得懂就从哪里开始......
  • vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab
    vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab1、tabs使用了element的插件tabs,省的自己写滑动动画2、左侧有用到了 element的插件NavM......