Vue生命周期

vue的从创建到销毁的过程

钩子函数

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

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

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

分类： 4大阶段8大方法

阶段	方法	方法
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

初始化阶段

new Vue() 以后，vue内部给实例对象添加了一些基本的属性和方法，data和methods 初始化之前

beforeCreate(){
	consolo.log("beforeCreate--执行")
	consolo.log(this.msg)//undefined 拿不到data里的数据
}

data和methods 初始化之后

场景：网络请求，注册全局事件

created(){
	consolo.log("created--执行")
	consolo.log(this.msg)//hello world 可以拿到data里的数据
}

Vue实例从创建到编译模板执行的两个函数

注意： created可以获取到data，不能获取真实DOM

挂载阶段

真实DOM挂载之前 beforeMount()

场景： 预处理 data，不会触发 updated 钩子函数

beforeMount(){
	console.log("beforeMount -- 执行")
	consolo.log(document.getElementById("docid"))//null
	this.msg = "Hello Vue"//获取不到真实DOM，但是可以对data重新赋值预处理需要挂载到真实DOM的值
}

真实DOM 挂载之后 Mounted()

场景： 可以获取到挂载后的真实DOM

mounted(){
	console.log("mounted -- 执行")
	console.log(document.getElementById("docid"))//<p></p>
}

更新阶段

前提：data数据改变才执行

beforeUpdate(){
	consolo.log("beforeUpdate -- 执行")
	consolo.log(document.querySelectorAll("#UL>li")[4])//undefined
}

获取不到真实DOM，对data值的更新

更新之后 updated()

update(){
	consolo.log("update -- 执行")
	consolo.log(document.querySelectorAll("#UL>li")[4])//<li></li>
}

可以获取更新后的真实DOM

销毁阶段

前提：v-if=“false 删除DOM树

场景： 移除全局事件，移除当前组件，计时器，定时器，eventBus移除事件 $off 方法

beforeDestroy(){
	console.log('beforeDestroy -- 执行')
	clearInterval(this.timer)
}
destroyed(){
	console.log('destroyed -- 执行')
}

axios

axios 是一个专门用于发送 ajax 请求的库

• 支持客户端发送 Ajax 请求
• 支持服务端 Node.js 发送请求
• 支持 Promise 相关用法
• 支持请求和响应的拦截功能
• 自动转换 ajax

axios({
	method:'请求方式',
	url:'请求地址',
	data:[//post,向服务器提交数据
		xxx:xxx
	],
	params:[//get，获取服务端资源
		xxx:xxx
	]
}).then(res=>{
    console.log(res.data)
}).catch(res=>{
    console.log(err)
})

基本使用

<script>
	import axios from 'axios'
    export default {
        methods:{
            getAllFn(){
                //发起axios请求
                axios({
                    url:"URL",
                    method:"GET",
                }).then(res=>{
                    console.log(res);
                })
            }
        }
    }
</script>

获取图书

<script>
	import axios from 'axios'
    export default {
        methods:{
            getAllFn(){
                //发起axios请求
                axios({
                    url:"URL",
                    method:"GET",
                    params:{
                        bookname:this.bName//获取指定书名
                    }
                }).then(res=>{
                    console.log(res);
                })
            }
        }
    }
</script>

添加图书

<script>
	import axios from 'axios'
    export default {
        methods:{
            getAllFn(){
                //发起axios请求
                axios({
                    url:"URL",
                    method:"POST",
                    data:{
                        appkey:"hash",
                        ...this.bookObj,//剩余赋值，定义的名称和API文档需要一直才能赋值成功
                    }
                }).then(res=>{
                    console.log(res);
                })
            }
        }
    }
</script>

配置全局配置

import axios from 'axios'
axios.default.baseURL = 'http://localhost:8080/' //注意拼接的URL地址

ref属性

ref属性可以获取到真实DOM，在vue的挂载周期

语法: ref、this.$refs.XXX

代码

<template>
	<div>
        <h1 id="h" ref="refH">test</h1>
    </div>
</template>
<script>
	mounted(){
        //获取真实DOM的两种方式 
        console.log(document.getElementById("h"));
        console.log(this.$refs.refH);
    }
</script>

可以获取到组件对象

<template>
	<div>
        <Demo ref="h"></Demo>
    </div>
</template>
<script>
	import Demo  from './Demo'
    export default{
        mounted(){
            let demoObj = this.$refs.h
            demoObj.fn();//执行组件对应函数
        }
    }
</script>