对于Vue生命周期的理解
组件从创建到销毁的一系列过程叫做组件的生命周期,vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
组件的生命周期大体可以分为三个阶段: 初始化、运行中、销毁
初始化阶段:beforeCreate created beforeMount (render) mounted
运行中阶段:beforeUpdate updated
销毁阶段: beforeDestroy destroyed
仅对于官网图片的一些理解
钩子函数
1.初始化阶段
每个组件或者实例的生命周期都是从实例化开始的
- 1 beforeCreate (创建前)
beforeCreate钩子函数初始化的时候就会执行,此时元素还没有挂载。
但此时获取不到数据的,并且真实dom元素没有渲染出来的
beforeCreate(){
console.log("--执行beforeCreate--") //初始化时就执行
console.log(this.msg) //undefined 此时获取不到数据
console.log(document.getElementById("test")) //null 此时真实dom元素还没有渲染出来
},
在beforeCreate之后,进行初始化事件,进行数据劫持,动态的创建了get和set
- 2 created 创建后
created钩子函数初始化的时候就会执行,此时元素还没有挂载。
此时可以获取到数据,但是页面当中真实dom节点还没有渲染出来
在这个钩子函数里面,可以进行相关初始化事件的绑定、发送ajax操作、异步操作
当组件还没有挂载完毕之前,更改数据的话,不会执行运行时钩子函数
created()