生命周期:一个组件从创建到销毁的这个过程叫做生命周期(钩子函数)
1.beforeCreate(创建前)
1.当前生命周期函数主要用来做初始化工作
2.在这个生命周期函数中我们可以创建一个loading
2.created(创建后)
(结束loading)
1.在当前生命周期函数中我们可以访问到vm身上的所有的属性和方法
2.当前生命周期函数会将data和methods身上的属性和方法都挂载在vm的实例身上(这就是我们调用data的方法为什么可以直接this.属性就可以调用了)
3.当前生命周期函数会将data身上所有的属性添加一个getter/setter方法,因此如果需要进行前后端数据交互的时候必须在当前生命周期进行(响应式原理),如果数据没有提前在data中进行绑定,那么这个属性就不会有getter/setter方法,因此数据也不会动态的改变
3.beforeMount(挂载前)
1.数据和模板还没有进行相结合,在这个生命周期函数中我们可以进行数据最后的修改
2.在当前生命周期函数中是访问不到真实的dom结构的
4.mounted(挂载后)
1.数据和模板已经结合,在这个生命周期函数中我们可以通过this.$refs.值访问到真实的dom结构
2.$refs
ref = "值必须是整个虚拟dom中唯一"
访问的时候通过this.$refs.值
3.ref和document的区别
document是从整个页面去查找dom结构,这个dom结构肯定是已经插入到页面的dom结构
ref是从当前vm的虚拟dom中找到的当前元素,ref是从内存当中找到的dom结构
5.beforeUpdate(更新前)
1.当data中的数据发生改变的时候就会执行
2.可以访问到真实的dom结构
3.可以对数据做最后的修改
4.当前生命周期函数中的数据和模板还没有更新完毕
6.updated(更新后)
1.可以访问数据更新后最新的dom结构
2.在当前生命周期函数中需要特别的注意,因为当前函数是一个频繁触发的函数,因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断(判断如果这个插件没有的话,再去创建)
7.befoDestroy(销毁前)
1.在这个生命函数周期中,还是可以继续访问到真实的dom结构以及data中的数据
2.一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作
8.destroyed(销毁后)
1.将dom与数据之间的关联进行断开
2.在当前生命周期函数中是访问不到真实的dom结构的
ps:
以上生命周期函数中多次执行的生命周期函数
beforeUpdate和updated
组件第一次创建的时候会执行哪些生命周期函数
beforeCreate
created
beforeMount
mounted