Vue-生命周期钩子

含义

官方文档：

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

简单点来说，钩子函数就是你创建的Vue在初始化、更新数据、销毁时会被自动调用的函数。

八大钩子函数分别是：

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestory,destoryed

官网声明周期图

举例

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            dataList: [],//当前页要展示的分页列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            rules: {//校验规则
                code: [{required: true, message: '项目编码为必填项', trigger: 'blur'}],
                name: [{required: true, message: '项目名称为必填项', trigger: 'blur'}]
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行	
        created() {
            this.findPage();
        },
         //分页查询
            findPage() {
                //1.准备请求参数
                //共有3个条件，用QueryPageBean接受这3个请求参数
                var param = {
                    currentPage:this.pagination.currentPage,
                    pageSize:this.pagination.pageSize,
                    queryString:this.pagination.queryString
                }
                //2.发起ajax请求
                axios.post("/TravelItem/findPage.do",param).then((resp)=>{
                    this.pagination.total = resp.data.total
                    this.dataList = resp.data.rows
                }).catch((e)=>{
                    this.$message.error("操作失败");
                }).finally(()=>{

                })
            },
        }
       })
</script>