Vue钩子函数执行顺序探究

最新推荐文章于 2024-06-25 10:05:02 发布

weixin_34194359

最新推荐文章于 2024-06-25 10:05:02 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c875be1f265da2dce1f7d0b

版权

前言：
提起 vue 的函数执行顺序，生命周期函数是一个绕不开的话题，但当同时也会涉及到 keep-alive 时候，就会容易产生疑惑。今天特意花时间探究整理了一下，有兴趣的可以往下看看。

先说下最常用的生命周期函数：（话不多说，先放图）

这张图就已经说的很清楚了
有几点需要在这里提一下：

$el 什么时候能打印出来？
当在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标el时，在 beforeMount 时可以打印出来；

<body>
<div id="root">
    <button @click="changeNum">{{num}}</button>
</div>
</body>
<script>
let vm = new Vue({
    el: '#root',    // 获取执行vue的dom元素，初始化执行范围
    data() {
        return {
            font: 'dataFont',
            num: 0,
        }
    },
    methods: {
        changeNum() {
            this.num ++;
        }
    },
    beforeCreate() {
        console.log(this.font, this.$el, 'beforeCreate')
    },
    created() {
        console.log(this.font, this.$el, 'created')
    },
    beforeMount() {
        console.log(this.font, this.$el, 'beforeMonte')
    },
    mounted() {           
        console.log(this.font, this.$el, 'mounted')
    },
})
</script>

复制代码

打印结果：

当不存在时，在 mounted 阶段可以打印出来:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      font: 'dataFont',
    }
  },
  beforeCreate() {
      console.log(this.font, this.$el, 'beforeCreate')
  },
  created() {
      console.log(this.font, this.$el, 'created')
  },
  beforeMount() {
      console.log(this.font, this.$el, 'beforeMonte')
  },
  mounted() {
      console.log(this.font, this.$el, 'mounted')
  },
}
</script>
复制代码

对 DOM 的操作，应在 mounted 阶段，在之前访问会是 undefined
父子组件中的生命周期函数的执行顺序？

<div> <!-- 父组件 -->
    <sq-header /><!-- 子组件2 -->
    <router-view/>
    <sq-footer /><!-- 子组件1 -->
</div>
复制代码

结果：

当使用 keep-Alive 时，进入离开组件时，会调用的钩子有哪些?

先来看一下 <keep-alive>

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

我们知道 <keep-alive> 会将所有匹配到的组件缓存起了，所以当进入被缓存的组件时，并不会触发 mounted 及之前的钩子函数，离开时也不会触发销毁钩子。
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子: activated 与 deactivated
activated 在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用

// 第一次进入缓存路由/组件:
// beforeMount => 从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated) => mounted =>  activated 进入缓存组件
// 因为组件被缓存，再次进入并不会触发 beforeCreate created beforeMount mounted
复制代码

deactivated 在组件被停用(离开路由)时调用

未完待续...

实际项目工作中，可能很多钩子函数我们用不到，但是通过去了解这些钩子函数，可以让我们在合适的地方去使用这些钩子函数。

weixin_34194359

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue钩子函数执行顺序探究

前言：提起 vue 的函数执行顺序，生命周期函数是一个绕不开的话题，但当同时也会涉及到 keep-alive 时候，就会容易产生疑惑。今天特意花时间探究整理了一下，有兴趣的可以往下看看。先说下最常用的生命周期函数：（话不多说，先放图）这张图就已经说的很清楚了有几点需要在这里提一下：$el 什么时候能打印出来？当在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标el时，在 ...
复制链接

扫一扫