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>