07-Vue:生命周期

1.生命周期

组件从创建到销毁的整个过程就是生命周期
钩子函数 vue框架内置函数，随着组件的生命周期阶段，自动执行
作用：特定的时间 执行特定的操作；
场景：组件创建完毕，可以在created生命周期函数中发起ajax请求 从而初始化data数据；

2.生命周期阶段

分为四个阶段：创建、挂载、更新、销毁；

2.1创建阶段

有两个钩子函数：beforeCreate和created

new Vue() vue实例化（组件是一个小的vue实例）
init event Lifecycle 初始化事件和生命周期函数
beforeCreate 生命周期函数被执行
init injections vue内部添加data和methods
created 生命周期函数被执行 实例创建
Has el option 是否有el选项 检查要挂到哪里
有 继续检查template选项
没有 调用$mount方法

2.2挂载阶段

有两个钩子函数：beforeMount和mounted

template选项检查
有 --编译template返回render渲染函数
没有 编译el选项对应标签作为template 要渲染的模板
虚拟DOM挂载成真实Dom之前
beforeMount 生命周期钩子函数
把虚拟DOM和渲染的数据一并挂到真实Dom上
真实dom挂载完毕
mounted生命周期钩子函数

2.3更新阶段

有两个钩子函数：beforeUpdate和updated

data里数据改变，更新Dom之前
beforeUpdate 生命周期钩子函数
Virtual Dom 虚拟DOM重新渲染 打补丁到真实Dom
updated 生命周期钩子函数
当有data数据改变 重复这个循环

2.4销毁阶段

有两个钩子函数：beforeDestroy和destroyed

当$destroy()被调用 比如组件DOM被移除(v-if)
beforeDestroy 生命周期钩子函数
拆卸数据监听器，子组件，和事件侦听器
实例销毁后触发最后一个钩子函数
destroyed 生命周期钩子函数

<template>
  <div>
    <p id="myp">{{ msg }}</p>
    <ul id="myul">
      <li v-for="(item, i) in arr" :key="i">
        {{ item }}
      </li>
    </ul>
    <button @click="arr.push('eee')">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello vue",
      timer: null,
      arr: ["aa", "bb", "cc", "dd"],
    };
  },
  //   创建阶段
  //   new Vue()以后  vue内部给实例对象添加了一些属性和方法，data和methods初始化之前
  beforeCreate() {
    console.log("beforeCreate");
    console.log(this.msg);
  },
  //   data和methods初始化以后
  //   场景：网络请求  注册全局事件
  created() {
    console.log("created");
    console.log(this.msg);
    this.timer = setInterval(() => {
      console.log("hahaha");
    }, 1000);
  },

  //   挂载阶段
  //   真实dom挂载之前
  //   场景 预处理data 不会触发update钩子函数
  beforeMount() {
    console.log("beforeMount");
    console.log(document.getElementById("myp")); //null
    this.msg = "hahaha";
  },
  //   真实dom挂载以后
  // 场景：使用真实dom
  mounted() {
    console.log("mounted");
    console.log(document.getElementById("myp")); //p
  },

  //   更新
  beforeUpdate() {
    console.log("beforeUpdate");
    console.log(document.querySelectorAll("#myul>li")[4]);
  },
  updated() {
    console.log("updated");
    console.log(document.querySelectorAll("#myul>li")[4]);
  },

  //   销毁
  // v-if="false" 销毁vue实例
  //   场景： 移除全局事件 移除当前组件 定时器 eventBus移除事件-------$off
  beforeDestroy() {
    console.log("beforeDestroy");
    clearInterval(this.timer);
  },
  destroyed() {
    console.log("destroyed");
  },
};
</script>

<style scoped>
</style>

页面刷新，只执行一次的钩子函数是：创建和挂载

3.Vue中axios使用

axios:调用后台接口的
1.安装
npm install axios
2.使用

<template>
  <div>
    <p>获取所有的图书信息</p>
    <button @click="getAllFn">点击 ---查看</button>
  </div>
</template>

<script>
// 下载axios
// 引入axios
// 发起axios请求
import axios from "axios";
export default {
  methods: {
    // getAllFn() {
    //   axios({
    //     url: "http://www.liulongbin.top:3006/api/getbooks",
    //     method: "GET",
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },

    async getAllFn() {
      let res = await axios.get("http://www.liulongbin.top:3006/api/getbooks");
      console.log(res);
    },
  },
};
</script>

<style scoped>
</style>

axios全局配置
目标: url的前缀统一设置

组件中

4.$refs

获取DOM

利用ref和$refs可以用于获取DOM元素

语法
ref定义值,通过$refs.值来获取原生dom元素;

ref定义值,通过$refs.值来获取组件对象，就能继续调用组件内的变量

<template>
  <div>
    <p>获取原生dom元素</p>
    <h1 id="h" ref="myh">我是一个h1标记</h1>
    <child ref="myc"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
//1.用来获取元素
// 2.可以获取组件对象
export default {
  components: { Child },
  mounted() {
    // console.log(document.getElementById("h"));
    // console.log(this.$refs.myh); //h1
    console.log(this.$refs.myc);
    let childobj = this.$refs.myc;
    childobj.fn();
    console.log(childobj.msg);
  },
};
</script>

<style scoped>
</style>

5.$nextTick使用

Vue更新dom------异步的

<template>
  <div>
    <p ref="myp">{{ count }}</p>
    <button @click="btn">点击count+1 马上获取p标签的内容</button>
  </div>
</template>

<script>
// 点击执行count++  马上获取p标签的内容  无法拿到新值
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btn() {
      this.count++;
      console.log(this.$refs.myp.innerHTML);
      //   vue更新dom异步
      // 解决this.$nextTick()
      this.$nextTick(() => {
        console.log(this.$refs.myp.innerHTML, "p");
      });
    },
  },
};
</script>

<style scoped>
</style>

$nextTick场景

<template>
  <div>
    <input v-if="isShow" ref="myInp" type="text" placeholder="这是一个输入框" />

    <button v-else @click="btn">点我进行搜索</button>
  </div>
</template>

<script>
// 点击按钮按钮消失 输入框出现并聚焦
// 1.获取输入框；2.输入框调用事件方法focus达到聚焦的行为
export default {
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    btn() {
      this.isShow = true;
      //   data变化更新dom是异步的
      // 输入框还没有更新到真实dom上
      this.$nextTick(() => {
        this.$refs.myInp.focus();
      });
    },
  },
};
</script>

<style scoped>
</style>