Vue生命周期方法（分类、生命周期方法调用时期示意图详解）、Vue实例方法（生命周期：mount、forceUpdate、nextTick、destroy）

目录

Vue生命周期方法

分类

生命周期方法调用时期示意图

Vue实例方法（生命周期）

this.$mount(str)

this.$forceUpdate()

this.$nextTick(function(){})

this.$destroy()

---

Vue生命周期方法

可以在直接在vue对象中定义创建期间的生命周期方法new Vue（{el:'#app',data:{},beforeCreate(){},created(){},...,beforeDestroy(){},destroyed(){}})，它会根据Vue处于不同的时期自动触发，组件中也相同，可以定义这些生命周期方法，其中销毁期间的生命周期方法可以通过组件的切换来演示（v-if判断true和false将会销毁和创建）。

分类

创建时生命周期方法：1.beforeCreate；2.created；3.beforeMount（该函数会自己在服务端和客户端各自触发一次，所以一般不使用该函数）；4.mounted（该函数一般用于ajax请求、监听事件、设置定时器等）；

运行期间的生命周期方法：1.beforeUpdate；2.updated；

销毁期间的生命周期方法：1.beforeDestroy；2.destroyed；

生命周期方法调用时期示意图

 

Vue实例方法（生命周期）

this.$mount(str)

如果 Vue 实例在实例化时没有收到 el 选项（当new Vue({})中对象的el属性未定义时），则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例，其中str为选择器。

this.$forceUpdate()

使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

this.$nextTick(function(){})

修改数据之后（监听和它写在同一函数体下的数据，例如在同一函数体下写有this.message=123，this.$nextTick(function(){})，当message发生变化，DOM更新完后才会执行function，和生命周期方法中的updated不同，其它的数据改变不会执行function），下次 DOM 更新循环之后执行function。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。（2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。所以如果你的目标浏览器不是原生支持 Promise （IE），你得自行兼容）

this.$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和 destroyed 的钩子。