Vue之生命周期钩子函数

基于Vue2.0

• beforeCreate：组件实例刚被创建，组件属性计算之前。【使用频率低，数据无法访问】
• created：组件实例创建完毕，属性已绑定，但是DOM还未生成。【使用频率高，能拿到数据也能修改数据，修改数据不会触发updated beforeUpdate钩子函数；可以在此钩子函数里进行axios请求访问后端数据】

// 获取数据的公共方法
    getData() {
      this.axios({
        url: "https://ku.qingnian8.com/dataApi/blog/showBlog.php",
        params: {
          page: this.page,
        },
      }).then((res) => {
        console.log(res);
        // 数据获取后，赋值给数组listArr
        this.listArr = res.data;
        this.showToast = false;
      });
    },
  },
  // 组件创建完毕后 立即获取数据， 放在mounted里也可以 但是会造成页面体验不好
  created() {
    //获取网络数据
    this.getData();
  },

• beforeMount：真实的DOM节点挂载到页面之前，编译模板已经结束，虚拟DOM已经存在，可以访问数据也可以更改数据，修改数据不会触发updated beforeUpdate钩子函数。
• mounted：真实的DOM节点挂载到页面之后，可以访问和修改数据，修改数据会触发updated beforeUpdate钩子函数。
• beforeUpdate：修改之前调用
• updated：修改之后调用【beforeUpdate、updated可以监控data里的所有数据变化，因此不要在这两个钩子函数里修改数据，否则会】
• beforeDestory：组件销毁前调用
• destory：组件销毁后调用