1.创建前:beforeCreate(){}
此时还访问不到data中的属性以及methods中的属性和方法,可以在当前生命周期创建一个loading事件,在页面加载完成之后将loading移除。
2 . 创建完成:created(){}
当前生命周期执行的时候会遍历data中所有的属性,给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性;当前生命周期执行的时候会遍历data&&methods身上所有的属性和方法,将这些属性和方法代理到vue的实例身上,在当前生命周期中我们可以进行前后端数据的交互(注:在vue项目中,我们在进行前后端交互时一般不用ajax,因为我们只是想单纯的使用ajax,但是却要引入整个jQuery,在一定程度上降低了性能,再者vue本身设计就是尽量减少DOM元素的操作,但jQuery却是注重DOM元素的操作,这就有点不合理,所以,一般用axios)。
3. 挂载前:beforeMount(){}
模板与数据进行结合,但是还没有挂载到页面上,因此我们可以在当前生命周期中进行数据的修改。
4. 挂载完成:mounted(){}
当前生命周期数据和模板进行相结合,并且已经挂载到页面上了,因此我们可以在当前生命周期中获取到真实的DOM元素,还可以在当前生命周期中做方法的实例化,给元素添加一个ref属性,且值必唯一,通过:this.$refs.属性获取DOM元素。
5.更新前:beforeUpdate(){}
当数据发生改变的时候当前生命周期就会执行,因此我们可以通过当前生命周期来检测数据的变化,当前生命周期执行的时候会将更新的数据与模板进行相结合,但是并没有挂载到页面上,因此我们可以在当前生命周期中做更新数据的最后修改。
6更新完成:updated(){}
数据与模板进行相结合,并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构(注:在当前生命周期中如果做实例化操作的时候须做条件判断)。
7销毁前:beforeDestroy(){}
当前生命周期中我们需要做事件的解绑,监听的移除,定时器的清除等操作。
8销毁完成:destroyed(){}
当前生命周期中我们需要做事件的解绑,监听的移除,定时器的清除等操作。(注:被keep-alive包裹的组件,不会被销毁,而是被缓存起来)。
代码示例
<template>
<div class="about">
<!-- <h1>胡杰</h1> -->
<div v-for="(item,i) in arr" :key="i">
<div>{{ item.id }}</div>
<div>{{ item.title }}</div>
<img :src="item.thumb" alt="">
<div>{{ item.subTitle }}</div>
</div>
</div>
</template>
<script>
import { login } from "../api/index";
import { select } from "../api/index";
export default {
data() {
return {
name: "ruirui",
arr: [],
text: {
phone: "18234798639",
password: "duanfa666",
},
};
},
//创建
// beforeCreate() {
// console.log(this.name);
// },
created() {
// login(this.text).then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log(err);
// });
// console.log(this.name),
// console.log(this.$el)
this.$http.get("http://43.143.211.183:8889/sale/selectGoodsTags").then(res=>{
console.log(res.data.data);
this.arr = res.data.data
}).catch(err=>{
console.log(err)
}).catch(err=>{
console.log(err)
})
},
//渲染
// beforeMount() {
// console.log(this.name),
// console.log(this.$el)
// },
// //挂载
// beforeMount() {
// console.log(this.name),
// console.log(this.$el)
// },
// mounted() {
// console.log(this.name),
// console.log(this.$el)
// },
// //更新
// beforeUpdate() {
// },
// updated() {
// },
// //销毁
// beforeDestroy() {
// },
// destroyed() {
// },
// methods: {
// },
// computed: {
// },
// watch: {
// },
// components: {
// },
// directives: {
// },
// filters: {
// }
};
</script>
<style>
</style>