二.vue组件进阶(重点) 钩子函数路由以及ajax应用

Vue 的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
加载渲染过程：

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程：
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程：
父 beforeUpdate -> 父 updated

销毁过程：
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

总结：

子的生命周期都会被先结束，父的才结束。先由父到子，再从子到父。
生命周期遵从“从外到内，再从内到外，mixins先于组件”的原则。
总的来说，从创建到挂载，是从外到内，再从内到外，且mixins的钩子函数总是在当前组件之前执行

什么是组件生命周期

一个组件从创建到销毁的整个过程就是生命周期

生命周期函数(钩子函数) 四个阶段 (一个阶段两个钩子函数) 八个钩子

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

**作用：**特定的时间点，执行某些特定的操作

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

生命周期函数(钩子函数) 四个阶段:

● 初始化 => 创建组件 => beforeCreate created
● 挂载 => 渲染显示组件 => beforeMount mouted
● 更新 => 修改了变量 => 触发视图刷新 => beforeUpdate updated
● 销毁 => 切换页面 => 会把组件对象从内存删除 => beforeDestory destoryed
官网参考
请添加图片描述

生命周期函数执行过程 ## 钩子函数必会

4个阶段初始化挂载更新销毁
created () 90% 挂载发ajax 可以访问data中定义的数据
mounted () 5% 挂载可以访问dom元素
destroyed () 5% 销毁清空定时器取消事件绑定

子组件

 <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>

父组件

<template>
  <div>
    <MyCom v-if="isShow"/>
    <hr>
    <button @click="isShow = !isShow">销毁Life组件</button>
  </div>
</template>

<script>
import MyCom from './MyCom'
export default {
    
    
  data(){
    
    
    return {
    
    
      isShow: true
    }
  },
  components: {
    
    
    MyCom
  }
};
</script>

生命周期的钩子函数是可选的

问父组件的8个钩子和子组件的8个钩子的先后执行的顺序？
父created 子created？
父mounted 子mounted？
在这里插入图片描述

$refs ref可以用来获取dom或组件实例对象

掌握ref的使用，能用它获取dom元素或者组件实例
1.dom元素

<template>   <标签 ref="xxxx" />  </template>
this.$refs.xxxx

在这里插入图片描述

<template>
  <div>
    <h1 ref="myH1">1. ref获取原生dom</h1>
    <button @click="fn">点击修改上面内容</button>
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    fn() {
    
    
      console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
      this.$refs.myH1.innerHTML = "改内容了";
    }
  }
}
</script>

2.组件实例对象
2.1父组件

<h1>2. 调用demo组件方法</h1>
<button @click="fn2">点击demo组件里最后一个高亮</button>
<Demo ref="de"></Demo>

<script>
import Demo from "./components/Demo";
export default {
    
    
  components: {
    
    
    Demo,
  },
  methods: {
    
    
    // ...省略
    fn2() {
    
    
      this.$refs.de.changeIndex(2);
    },
  },
};
</script>

2.2子组件

<template>
  <div>
    <p :style="{ color: ind == 0 ? 'red' : '' }">首页</p>
    <p :style="{ color: ind == 1 ? 'red' : '' }">分类</p>
    <p :style="{ color: ind == 2 ? 'red' : '' }">爱好</p>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      ind: 0,
    };
  },
  methods: {
    
    
    changeIndex(index) {
    
    
      this.ind = index;
    },
  },
};
</script>

nexTick使用 vue 中，视图更新是异步的。

**1.理解: this.a 从1—>2
1.1视图不是立刻马上更新的
1.2把更新视图这个事放在一个数组中 (想像看不见的放在数组中)
1.3当所有的同步代码全部执行完成，再去数组去执行更新视图 **
作用:
如果你希望在更新之后的dom的基础上做一些事，就可以把这个事放在nextTick的回调

this.$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
      }
    },
  };
</script>

//vue实现
<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>

在这里插入图片描述
应用场景 : 在js代码中，修改数据之后，希望随后拿到最新的dom。
dom是异步更新的, $nextTick可以等待dom更新后触发此方法
目标: 点击搜索按钮, 显示聚焦的输入框, 按钮消失=》默认输入框不显示

<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>

在这里插入图片描述

扩展 $nextTick返回Promise对象

methods: {
    
    
    async searchFn(){
    
    
        this.isShow = true
        await this.$nextTick()
        this.$refs.inp.focus()
    }
}