vue组件化--生命周期函数

1. 生命周期函数(钩子函数)

定义 : vue框架内置函数 , 随着组件的生命周期 , 自动 按次序 执行

作用 : 在特定的时间点 , 执行某些特定的操作

场景 : 组件创建完毕后 , 可以再created生命周期函数中发起Ajax请求 , 从而初始化data数据

四个阶段 : 

        初始化 => 创建组件          =>      beforeCreate   created

        挂载 => 渲染显示组件      =>      beforeMount   mounted      

        更新 => 修改了变量          =>      触发视图刷新    beforeUpdate   updated

        销毁 => 切换页面              =>     会把组件对象从内存删除   beforeDestroy   destroyed

 子组件生命周期如下

<template>
  <div>
    <ul id="myUl">
      <li v-for="(item, ind) in arr" :key="ind">{{ item }}</li>
    </ul>
    <button
      @click="arr.push(Math.random() * 10)"
    >
      增加一个元素
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: "我是变量",
      arr: [1, 2, 3, 4]
    }
  },
  beforeCreate () {
    // 1. 创建前
    console.log("beforeCreate --- 实例初始化前")
    console.log(this.msg) // undefined
  },
  created () {
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  实例初始化后")
    console.log(this.msg) // "我是变量"
    
    // 给对象添加属性
    this.timer = setInterval(()=>{
      console.log(Date.now())
    }, 1000)
    this.fn = ()=>{ console.log(Date.now())}
    document.addEventListener('mousemove', this.fn)
  },
  beforeMount () {
    // 3. 挂载前
    console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
    console.log(document.getElementById("myUl")) // null
    // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
  },
  mounted () {
    // 4. 挂载后=> 操作dom
    console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
    // console.log(document.getElementById("myUl").children[1].innerHTML)
    console.log(document.querySelector('#myUl').children[1].innerText)
  },
  beforeUpdate () {
    // 5. 更新前
    console.log("beforeUpdate --- 数据更新, 页面更新前")
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
  },
  updated () {
    // 6. 更新后
    console.log("updated --- 数据更新, 页面更新后")
    console.log(document.getElementById("myUl").children[4].innerHTML)
  },
  beforeDestroy () {
    // 7. 销毁前
     // (清除定时器 / 解绑js定义的事件)
    console.log("beforeDestroy --- 实例销毁之前调用")
  },
  destroyed () {
    // document.removeEventListener('mousemove', 回调函数的名字)
    document.removeEventListener('mousemove', this.fn)
    // clearInterval(this.timer)
    // 8. 销毁后
    // (清除定时器 / 解绑js定义的事件)
    console.log("destroyed --- 销毁完成")
  }
};
</script>

执行顺序 :  beforeCreate => created => beforeMount => mounted => createUpdate => updated => beforeDestroy => destroyed

如果要考察是的父和子生命周期函数的执行顺序呢?

执行顺序如下 : 

        父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created =>         子beforeMount => 子mounted => 父mounted => 父beforeUpdate => 子beforeUpdate         => 子updated => 父updated => 父beforeDestroy => 子beforeDestroy => 子destroy =>         父destroy

2. $refs使用

作用 : 获取dom元素或者组件实例

 2.1子组件如下

<template>
  <div style="border: 1px solid #ccc">
    <h2>子组件</h2>
    num:{{ num }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100,
    };
  },
  methods: {
    fn(n) {
      this.num = n;
      console.log("我是子组件的函数");
    },
  },
};
</script>

<style>
</style>

 2.2父组件如下

<template>
  <div style="border: 1px solid #ccc">
    <h1>父组件</h1>
    <h2 ref="refH2">获取 dom元素 和 组件</h2>
    <button @click="fn">获取dom元素</button>
    <MyCom ref="refMyCom" />
    <button @click="fn2">获取组件</button>
  </div>
</template>

<script>
//1.引入
import MyCom from "./MyCom.vue";
export default {
  methods: {
    fn() {
      // 1. 获取dom原生的方式
      // document.querySelector("h2").innerHTML = "abc"
      // 2. 获取dom原生的方式2 this.$refs.ref的值
      console.log(this.$refs.refH2);
      console.log(this.$refs.refH2.innerHTML);
    },
    fn2() {
      console.log(this.$refs.refMyCom);
      this.$refs.refMyCom.fn();
      //this.$refs.refMyCom.num = 1;
      this.$refs.refMyCom.fn(1000);
    },
  },
  components: {
    MyCom,
  },
};
</script>

<style>
</style>

 3. nextTick

背景 : 数据变化而导致的dom更新是异步的

 示例如下:

<template>
  <div>
    <p id="num">数字: {{ count }}</p>
    <button @click="btn">点击+1, 观察打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btn() {
        this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
        console.log(document.getElementById('num').innerHTML); // 0
        this.$nextTick(() => {
            console.log("DOM更新后触发$nextTick函数");
            console.log(document.getElementById('num').innerHTML); // 1
        })
    },
  },
};
</script>

 理解图如下:

 $nextTick场景如下:

<template>
  <div>
      <input type="text" placeholder="输入要搜索的关键字" v-if="isShow" ref="inp">
      <button v-else @click="searchFn">点击搜索,出输入框并马上处于激活状态</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        searchFn(){
            this.isShow = true // 点击显示输入框, 隐藏按钮
            // this.$refs.inp.focus() // 让输入框处于激活状态

            // 发现报错了, this.$refs.inp是个undefined(没获取到dom标签)
            // 因为数据isShow改变后, "异步"显示input, 而代码会继续往下走所以还没获取到input, 所以是undefined

            // 解决: 在dom更新后, 会触发$nextTick里的回调函数
            this.$nextTick(() => {
                this.$refs.inp.focus();
            })
        }
    }
}
</script>

 理解图如下: