Vue学习笔记（七）--- ref 引用 和 生命周期相关

一、ref 引用

1、概念

​ ref 可以让开发者在不依赖 jQuery 的前提下，获得页面中 DOM 元素或组件的引用。在每个 vue 的组件实例中，都包含了 一个 $ref 对象，里面存储这对应的 DOM 元素或组件的引用。默认情况下，组件实例的 $ref 指向一个空的对象。

2、使用 ref 引用 页面DOM元素

<template>
  <div>
     <!--    为元素设置 ref 属性，为对应的的dom元素添加引用名称-->
    <div class="d1" ref="div">div</div>
    <button @click="changeColor">修改div颜色</button>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      msg: '我是子组件中的值'
    }
  },
  methods: {
    changeColor() {
      // 根据 this.$refs.引用名称 的形式 就可以获取到 DOM元素的引用。
      // 获取dom元素之后，可以对其进行操作
      this.$refs.div.style.backgroundColor = 'pink';
    }
  }
}
</script>

<style scoped>
.d1 {
  width: 100px;
  height: 200px;
  background-color: red;
}
</style>

3、使用 ref 引用组件实例

<template>
  <div id="app">
<!--    为组件实例添加ref引用名称-->
    <test ref="test"></test>
    <p>{{ msg }}</p>
    <button @click="changeColor">在父组件中修改div颜色，并获取变量值</button>
  </div>
</template>

<script>
import test from './components/test'
export default {
  name: 'App',
  components: {
    test
  },
  data() {
    return {
      msg: '这里显示从子组件获取的变量值，此时未获取'
    }
  },
  methods: {
    changeColor() {
      // 引用到组件实例之后 就可以调用该组件实例的 methods 中的方法
      this.$refs.test.changeColor();
      // 引用到组件实例之后 就可以调用该组件实例的 data 中的数据
      this.msg = this.$refs.test.msg
}
  }
}
</script>

4、this.$nextTick()

​ 组件实例的 $nextTick(function() { }) 方法，会将方法的参数推迟到本次DOM更新周期结束后再执行，简单来说就是当组件实例中的数据发生变化时，暂时不执行 $nextTick(function() { }) 中的 代码 ，直到等到 组件的DOM树更新渲染完成后，再去执行$nextTick() 中的代码。这保证了 $nextTick() 中的代码可以操作到最新的DOM元素。

<template>
  <div>
    <input type="text" v-if="f" ref="ipt">
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      f: false
    }
  },
  methods: {
    showInput() {
      this.f = true
      // 如果直接书写引用输入框的语句 会报错  
      // 因为此时 dom 还没进行更新 input元素还没有显示到页面中 无法被获取
      // this.$refs.ipt.focus()
      
      // 等到 dom更新结束后 再去获取元素
      this.$nextTick(() => {
        this.$refs.ipt.focus()
      })
    }
  }
}
</script>

二、生命周期

1、生命周期和生命周期函数的概念

​
​ 生命周期是指vue 从创建 到 销毁 的整个阶段，强调的是一整个时间段。

​ 生命周期函数是由vue 提供的内置函数，会在组件生命周期的某些时间点，按次序执行，不同的时间点，可以执行不同的任务。例如：我们通常在 created() 中，去向后端发送请求，获取页面数据。

​ vue的生命周期主要分为四大步：创建、挂载、更新、销毁，每一大步又分为两小步。分别有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

​ 在 beforeCreate 之前，也就是 new Vue 的时候，会初始化事件和生命周期函数。

​ 在 beforeCreate 到 created 之间，初始化并挂载props、data、methods，到达 created 时三者处于可用状态。

​ 在 created 到 beforeMounte 之间，基于数据和模板在内存中编译生成HTML结构，并创建虚拟DOM。

​ 在 beforeMounte 到 mounted 之间，将内存中的HTML结构渲染到页面上，并将虚拟DOM挂载到真实页面。

​ 在 mounted 到 beforeUpdate 之间，实时监控data中的数据，一旦发生变化，就会触发beforeUpdate，准备更新页面。

​ 在 beforeUpdate 和 updated 之间，根据最新数据，重新渲染页面DOM结构。

​ 当主动调用销毁函数或组件自动销毁时，先触发 beforeDestroy ，再触发 destroyed 。

2、生命周期图示（重点掌握）

3、父子组件之间的生命周期执行顺序

在实际项目开发中，我们经常会使用组件，然后就会形成嵌套的父子组件的关系，无论是父组件还是子组件都有属于自己的生命周期，那他们生命周期之间的执行顺序是怎样？这是一个很重要的问题，因为这将决定数据初始化顺序等相关问题，经过代码实践，我最终得出了以下结论：

① 页面初始加载阶段

父组件brforeCreate => 父组件的created => 父组件的beforeMount => 子组件的beforeCreate => 子组件的created => 子组件的beforeMounte =>子组件的mounted => 父组件的mounted。
也就是说 父组件先执行，执行到beforeMount阶段后，子组件开始执行，子组件执行到mounted之后，父组件再继续执行mounted，至此，页面初始加载阶段结束。

② 组件更新阶段

当父子组件同时发生更新时：
父组件beforeUpdate => 子组件beforeUpdate => 子组件updated => 父组件updated
父组件先执行beforeUpdate，然后子组件开始执行，updated执行结束后，父组件才执行updated。

仅子组件发生更新时：
子组件beforeUpdate => 子组件updated
子组件的更新并不会引发父组件的生命周期执行update。

仅父组件发生更新时：
父组件beforeUpdate => 父组件updated
父组件的更新并不会引发子组件的生命周期执行update。

③销毁阶段

父组件beforeDestroy => 子组件beforeDestroy => 子组件destroyed => 父组件destroyed
父组件先执行 beforeDestroy，然后子组件开始执行beforeDestroy，子组件destroyed销毁成功后，父组件再destroyed销毁成功。