基于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:组件销毁后调用