vue的生命周期使用

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>