vue知识点总结（三）—— 组件生命周期持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章vue知识点总结（二）—— 组件通信中，我们学习了vue相关知识点，包括组件通信、生命周期等相关知识点。今天，在这篇文章中，vue其他的相关知识点，包括组件的各个生命周期、ref、动态组件、keep-alive等相关知识点。

组件生命周期分类

vue 组件的生命周期函数，可以分为 3 大类：

组件初始化阶段的生命周期函数
组件运行阶段的生命周期函数
组件销毁阶段的生命周期函数

接下来我们学习下各个生命周期。

beforecreated：data数据初始化之前，组件还没有数据。
created: data数据初始化之后，可以获取到组件的数据。

     beforeCreate() {
       console.log('beforeCreate', this.name)
      },
      created() {
        console.log('created', this.name)
      },

beforeMount：DOM渲染之前，DOM还没渲染。
mounted：DOM渲染之后，可以操作DOM了。

console.log('mounted', document.querySelector('h1'))

beforeUpdate: 数据更新，DOM更新前。
updated: 数据更新，DOM更新后。

    beforeUpdate() {
        console.log('beforeUpdate', document.querySelector('h1').innerHTML)
    },
    updated() {
       console.log('updated', document.querySelector('h1').innerHTML)
    },

beforeDestroy: 组件销毁前。
destroyed: 组件销毁后。

    <h1 @click="name = 123">{{ name }}</h1>
    <button @click="$destroy()">按钮</button>

使用场景：

created() 发送ajax请求
mounted() 操作DOM
destroyed : 清除定时器等

ref和$refs

利用ref和$refs可以用于获取dom元素, 或者组件实例。

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。

使用：

给需要获取的dom元素或者组件, 添加ref属性。

<div>
  <div ref="box">我是div盒子</div>
  <jack ref="jack"></jack>
  <button @click="fn">按钮</button>
</div>

通过this.$refs.xxx获取, 拿到组件可以调用组件的方法。

import Jack from './jack.vue'
export default {
  methods: {
    fn () {
      console.log(this.$refs.box)
      console.log(this.$refs.jack)
      this.$refs.jack.sayHi()
    }
  },
  components: {
    Jack
  }
}

$nextTick

我们先看两个需求。

需求1: 点击按钮, 切换显示输入框。

<template>
  <div>
    <!-- 需求: 点击按钮, 切换显示输入框 -->
    <input type="text" v-if="isShowInput">
    <button @click="fn" v-else>点此搜索</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShowInput: false
    }
  },
  methods: {
    fn () {
      this.isShowInput = true
    }
  }
}
</script>

需求2: 显示输入框的同时, 要获取焦点。

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus()方法即可。直接调用会报错, 因为vue是dom更新异步的 (提升渲染效率), this.isShowInput = true 执行完时, 实际的dom还没渲染出来。

<input ref="inp" type="text" v-if="isShowInput">

fn () {
  this.isShowInput = true
  this.$refs.inp.focus()
}

组件的 $nextTick(callback) 方法，会把callback回调推迟到下一个DOM更新周期之后执行。

通俗的理解是：等组件的DOM 刷新之后，再执行callback回调函数。从而能保证 callback 函数可以操作到最新的 DOM 元素。

<template>
  <div>
    <!-- 需求: 点击按钮, 切换显示输入框 -->
    <input ref="inp" type="text" v-if="isShowInput">
    <button @click="fn" v-else>点此搜索</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShowInput: false
    }
  },
  methods: {
    fn () {
      this.isShowInput = true
      this.$nextTick(() => {
        this.$refs.inp.focus()
      })
    }
  }
}
</script>

动态组件

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

<template>
   <div>
        <!-- 
          固定写法
          <my-header></my-header>
          <my-footer></my-footer> 
        -->

        <button @click="name = 'my-header'">显示头部</button>
        <button @click="name = 'my-footer'">显示底部</button>
          <!-- 动态组件 -->
        <component :is="name"></component>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
export default {
  data() {
    return {
      name: '',
    }
  },
  components: {
    MyHeader,
    MyFooter,
  },
}
</script>

使用keep-alive保持状态

默认情况下，切换动态组件时无法保持组件的状态。会将组件销毁, 将来显示时, 又会重新创建。此时可以使用vue内置的 <keep-alive> 组件保持动态组件的状态。使用 keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive>
  <component :is="comName"></component>
</keep-alive>

钩子

 activated() {
    console.log('激活')
  },
  deactivated() {
    console.log('丧失激活')
  },

两个组件切换传递数据。

// MyHeader.vue
data() {
    return {
      msg: '哈哈',
    }
  },
  activated() {
    console.log('激活')
    this.msg = localStorage.getItem('key')
  },
// MyFooter.vue
  methods: {
    fn() {
      let rand = Math.floor(Math.random() * 1000)
      console.log('rand', rand)

      localStorage.setItem('key', rand)
    },
  },