详解Vue的生命周期
- 生命周期是指一个组件从创建->运行->销毁的整个阶段 ,强调的是一个时间段
而vue内置的的生命周期函数,会伴随着组件的生命周期门自动按次序执行
-
组件创建阶段
beforeCreate()//1.初始化事件和生命周期。但是props/data/methods都尚未被创建 //此时组件还不能有什么具体作用 create() // 2. 初始化props/data/methods,都处于可用状态、但是组件的html模板不可用 //一般在这个阶段发起axios请求,不能操作dom beforeMount() //3.基于数据和模板,在内存中编译生成HTML结构,但是没有在浏览器中渲染 //也可以在这里发异步请求,但不推荐 mount() //4.将内存中编译生成的HTML结构,替换到el对象指定的dom元素 //第一次最早可以在这里操作dom元素
||
-
组件运行阶段
beforeUpdate() //当数据将要发生变化的时候触发,此时的data里面的数据是最新的,但是还没渲染到页面上 update() //已经根据最新的数据渲染好页面了,要操作最新的dom结构要在这里
||
-
组件销毁阶段
beforeDestory() //将要销毁但是还没有销毁 destory() //完全销毁
官网的生命周期函数图