首页 > 其他分享 >vue 每次进入页面 生命周期

vue 每次进入页面 生命周期

时间:2022-08-24 19:58:56浏览次数:63  
标签:el 生命周期 beforeCreate beforeMount created vue mounted data 页面

生命周期

1.vue有哪些生命周期函数

有8个

 beforeCreate

 created

 beforeMount

 mounted 

 beforeUpdate

 updated

 beforeDestroy

 destroyed

2.一旦进入组件或页面会执行哪些生命周期、顺序

 beforeCreate 

 created

 beforeMount

 mounted

3.添加了keep-alive后,会增加哪些生命周期

 activated、deactivated

4.在哪个阶段有$el,在哪个阶段有$data

 beforeCreate  都没有

 created  有$data,无$el(即还没有dom节点)

 beforeMount 有$data,无$el

 mounted 都有(所以到了mounted中才有dom节点)

 (补充:$el表示组件的根节点,$data表示下面代码中的data

<div id=‘app’>

  new Vue({

    el:’#app’,

    data(){

      return {

        str:’123’

      }

    }

//这里的生命周期函数的写法先后顺序不会影响生命周期函数的执行顺序

    beforeCreate(){

     console.log(‘beforeCreate’,this.$el,this.$data);

   }

 created(){

   console.log(‘created’);

}

 beforeMount(){

   console.log(‘beforeMount’);

}

 mounted(){

  console.log(‘mounted’);

}

  })

 

  class Vue{

     constructor(option) {

          //这里的生命周期函数的顺序决定了函数的执行顺序

         option.beforeCreate.bind(this)();//改变this的指向,最后的()表示执行

          this.$data = options.data;// 实现在created之后有data

         option.created.bind(this)();

         option.beforeMount.bind(this)();

          this.$el = document.querySelector(options.el);//实现在beforeMount之后有el

     }

  }

5.如果加了keep-alive,第一次进入组件会执行哪些生命周期函数

 beforeCreate 

 created

 beforeMount

 mounted

 activated

(补充:keep-alive用于缓存组件)

6.如果加了keep-alive,第2次 或 第n次 进入组件会执行哪些生命周期函数

 activated

 (补充:因为这时候页面已经被缓存了)

标签:el,生命周期,beforeCreate,beforeMount,created,vue,mounted,data,页面
From: https://www.cnblogs.com/web-aqin/p/16621361.html

相关文章

  • vue3父子组件传值defineProps、defineEmits、defineExpose
    一、前言本文介绍父子组件传值defineProps、defineEmits、defineExpose二、语法在scriptsetup中必须使用defineProps和defineEmitsAPI来声明props和emits,它......
  • Vue 3-150行代码实现新国标红绿灯效果案例
    昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了。今天接着更新图文版本,大家跟着优雅哥通过该案例实......
  • BaseServlet抽取以及UserServlet和页面路径改写
    BaseServlet抽取优化Servlet减少Servlet的数量,现在是一个功能一个Servlet,将其优化为一个模块一个Servlet,相当于在数据库中一张表对应一个Servlet,在Servlet中提......
  • vue3的状态管理方案pinia/类似于vue2的VueX
    pinia官网:https://pinia.vuejs.org/pinia菠萝挺不错,简单又灵活。1.安装:yarnaddpinia或者 npminstallpinia,全局加--location=global2.注册使用main.jsimport{cr......
  • vue打包记录
    这里的确是css以及js文件的路径问题,但解决时并不需要手动改路径或者加一段判断去修改,最方便的办法时在项目打包前的vue.config.js里面将publicPath属性添加或者修改为 pub......
  • vue-route
    $route.path类型:string字符串,对应当前路由的路径,总是解析为绝对路径,如/foo/bar。$route.params类型:Object一个key/value对象,包含了动态片段和全匹配片段......
  • angular ionic ts的数据不更新到html页面
    场景:在ts中更新了某个数据但是未刷新到html页面,该页面的上方放置的腾讯地图,下方放置需要更新数据的版块,该板块的数据未更新其他页面能正常更新原因:未知解决方法:在ts......
  • Spring bean 的生命周期
    bean定义:在配置文件里面用来进行定义。bean初始化:有两种方式初始化:1.在配置文件中通过指定init-method属性来完成2.实现org.springframwork......
  • vue初始化data数据
     初始化datathis.$data= this.$options.data() 初始化data中form this.$data.form=this.$options.data().form......
  • 【Vue模板报错】关于 The template root requires exactly one element 报错的解决方
    报错内容  报错原因Vue只允许模板里存在一个根节点。解决方案在<template>中添加一个<div>标签,之后所有的组件全部加在<div>即可解决。 ......