Vue生命周期中mounted和created的区别

一、什么是VUE生命周期？

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期，也可以理解为Vue中实例或者组件从创建到消灭中间经过的一系列过程，虽然不太严谨。以下为官方的一张生命周期图：

生命周期里的所有钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

还是言归正传看一下mounted和created的区别吧：

看下面这张图

从图中可以看出：

• created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。通常接口返回的数据，渲染到组件中的时候，需要有数据再渲染，就需要在这里调用。
• mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。通常是要有页面，才初始化某些数据，例如用到的一些mui插件需要初始化，则需要在这里调用

两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，
比如插件chart.js的使用: var ctx = document.getElementById(ID);
通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，
那么mounted就是不二之选。

项目中用到的这两个：

使用mounted,此时引用mui的一个插件
……
mounted() {
    // 当此钩子函数执行的时候，我们才可以进行控件或插件的初始化工作；
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  }
……


使用created，接口返回数据
……
created() {
    this.getPhotoCategory();
    this.getPhotoByCategory(0);
  },
  methods: {
    async getPhotoCategory() {
      // 获取图片的分类数据
      const { data } = await this.$axios.get("/api/getimgcategory");
      if (data.status === 0) {
        // 手动补全分类的信息
        data.message.unshift({ title: "全部", id: 0 });
        this.category = data.message;
      }
    },
    async getPhotoByCategory(id) {
      // 根据图片分类的Id获取图片的数据
      const { data } = await this.$axios.get("/api/getimages/" + id);
      if (data.status === 0) return (this.photolist = data.message);
    }
  },
……