关于学习 Vue 的生命周期钩子函数
在Vue的官方文档中,给出了生命周期图示
所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义。
beforeCreate:
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created:
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
可以拿到数据
可以调用实例和方法
在这个生命周期钩子函数中适宜做异步请求
beforeMount:
在挂载开始之前被调用:相关的 render 函数首次被调用。
也就是说DOM还未被渲染
该钩子在服务器端渲染期间不被调用。
mounted:
el 被新创建的 vm. el 也在文档内。
DOM已经被渲染,初始数据DOM渲染完毕,可以获取DOM
beforeUpdate
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
updated:
数据更新完毕,如果对数据做统一的处理,在updated中处理
,如果想分别区分不同的数据更新,同时对DOM操作,用nextTick
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
watch:对具体某个函数变化作统一处理
nextTick:处理某个数据的某一次变化
created:可以获取数据,调用一部数据,调用方法
updata在nextTick之前触发