生命周期

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

钩子函数

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

作用：特定的时间 执行特定的操作

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

分为4大阶段

创建

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

• beforeCreate
• created

挂载

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

• beforeMount
• mounted

更新

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

• beforeUpdate
• updated

销毁

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

• beforeDestroy
• destroyed

vue中axios的使用

• 安装

  npm install axios
  

• 使用

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

axios全局配置

目标: url的前缀统一设置

// main.js

import axios from 'axios'

axios.defaults.baseURL = 'http://www.liulongbin.top:3006';

// 挂载到Vue原型上  任何一个组件都可以调用Vue原型上的$axios属性
Vue.prototype.$axios = axios

组件中

<script>
export default {
  created() {
    this.getdata()
  },
  methods: {
    async getdata() {
      let res = await this.$axios.get('/api/getbooks')
      console.log(res)
    },
  },
}
</script>

$refs

获取DOM和子组件

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

语法

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

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

<template>
  <div>
    <p>获取原生dom元素</p>
    <h1 id="h" ref