vue2 生命周期 相关面试题

目录

生命周期有哪些？

 一旦进入组件会执行哪些生命周期？

父组件引入子组件后，生命周期的执行顺序是？

发送请求在created还是mounted？

为什么不在beforeCreate 里发送请求？

beforeCreate和created的区别？

ps：相关代码（可直接放置到vue2项目中）

MyFather.vue 

MySon.vue 

加入keep-alive会执行哪些生命周期？

 扩展：第一次进入组件生命周期的执行顺序是？

扩展：第二次或者第N次进入组件会执行哪些生命周期？

生命周期的使用场景

---

生命周期有哪些？

vue生命周期分为四个阶段：
第一阶段（创建阶段）：

                beforeCreate  

                created   （methods 、data数据能获取到了）
第二阶段（挂载阶段）：

                beforeMount（render）

                mounted
第三阶段（更新阶段）

                beforeUpdate

                updated
第四阶段（销毁阶段）

                beforeDestroy

                destroyed

 一旦进入组件会执行哪些生命周期？

beforeCreate

created
beforeMount

mounted

父组件引入子组件后，生命周期的执行顺序是？

父：beforeCreate、created、beforeMount

子：beforeCreate、created、beforeMount、mounted

父：mounted

 如图

发送请求在created还是mounted？

这个问题具体看项目和业务的情况：

• 如果为父子组件，且需要优先加载子组件的数据，那么根据执行顺序（父的三个 子的四个 父的一个），父组件的请求要放在mounted中
• 如果组件没有依赖关系，那么放在哪个生命周期中都是可以的

为什么不在beforeCreate 里发送请求？

因为如果请求封装在methods方法中，在beforeCreate 里拿不到methods方法的

beforeCreate和created的区别？

beforeCreate阶段 没有 data 和 methods

created 中 有data 和 methods

 在created中如何获取dom？

通过 异步 方式获取

如：axios的.then  、 await 、setTimeout、this.$nextTick

ps：相关代码（可直接放置到vue2项目中）

MyFather.vue 

<template>
  <div id="Father">
    <MySon ref="myson"></MySon>
  </div>
</template>

<script>
import axios from 'axios'
import MySon from '@/components/MySon.vue'

export default {
  name: 'MyFather',
  components: {
    MySon
  },
  data() {
    return {
      a: 1
    }
  },
  beforeCreate() {
    console.log('父 beforeCreate', this.$el, this.$data)

    axios({ url: 'http://jsonplaceholder.typicode.com/posts' }).then(res => {
      // axios请求在哪个生命周期写，都是在mounted周期后拿到数据
      console.log('父 res', res)
      // created 周期中通过 异步 方式获取dom
      console.log('异步', document.getElementById('Father'))
      console.log('异步', this.$refs.myson)
    })

    // 测试为什么不在beforeCreate 里发送请求？
    console.log('------data 中的a', this.a)
    this.getData()
  },
  created() {
    console.log('父 created', this.$el, this.$data)
    console.log('-----data 中的a', this.a)
    this.getData()
    console.log('同步', document.getElementById('Father'))
    console.log('同步', this.$refs.myson)
  },
  beforeMount() {
    console.log('父 beforeMount', this.$el, this.$data)
  },
  mounted() {
    console.log('父 mounted', this.$el, this.$data)
    axios({ url: 'http://jsonplaceholder.typicode.com/posts' }).then(res => {
      console.log('父 res', res)
    })
    axios({ url: 'http://jsonplaceholder.typicode.com/posts' }).then(res => {
      console.log('父 res', res)
    })
  },
  beforeUpdate() {
    console.log('父 beforeUpdate')
  },
  updated() {
    console.log('父 updated')
  },
  beforeDestroy() {
    console.log('父 beforeDestroy')
  },
  destroyed() {
    console.log('父 destroyed')
  },
  methods: {
    getData() {
      console.log('getData 方法调用了')
    }
  }
}
</script>

MySon.vue 

<template>
  <div>
    <img :src="imgSrc" alt />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'MySon',
  data() {
    return {
      imgSrc: ''
    }
  },
  beforeCreate() {
    console.log('子 beforeCreate')
  },
  // async await 请求
  async created() {
    console.log('子 created')
    let res = await axios({ url: ' https://api.thecatapi.com/v1/images/search?limit=1' })
    console.log('子 res', res)
    this.imgSrc = res.data[0].url
  },
  beforeMount() {
    console.log('子 beforeMount')
  },
  mounted() {
    console.log('子 mounted')
  },
  beforeUpdate() {
    console.log('子 beforeUpdate')
  },
  updated() {
    console.log('子 updated')
  },
  beforeDestroy() {
    console.log('子 beforeDestroy')
  },
  destroyed() {
    console.log('子 destroyed')
  }
}
</script>

加入keep-alive会执行哪些生命周期？

activated

deactivated

 扩展：第一次进入组件生命周期的执行顺序是？

beforeCreate  

created

beforeMount

mounted

activated

扩展：第二次或者第N次进入组件会执行哪些生命周期？

只会执行activated/deactivated

生命周期的使用场景

beforeCreate  

created

beforeMount

mounted

activated