本文主要介绍关于Vue.js实例方法生命周期的相关内容，分享给大家参考和学习。学习的朋友们会一起看看详细的介绍：

首先，$mount()挂载方法

$mount用于装载扩展。如果Vue实例在实例化期间没有接收到el选项，那么它就处于“卸载”状态，并且没有关联的DOM元素。您可以使用虚拟机手动装载未装载的实例。$mount()。

例如，我们扩展了一个全局组件，并通过$mount手动将其装载到DOM上，从而生成了一个Vue实例。

Div id='#app'/div展开一个全局组件并将其挂载到DOM上。

//扩展全局组件var nav bar=vue . extend({ template : ` div { { title }}/div `，data () {return {title :' vue扩展全局组件' } }，Mounted(){ console . log(' Mounted on ')})//使用全局扩展组件挂载到id为#app(将替换# app)的DOM上var VM=new navbar()。$ mount(' # app ')；//或varvm=new nav bar({ El : ' # app ' })如果未提供elementOrSelector参数，模板将呈现为文档外部的元素，并且必须使用本机DOM API将其插入到文档中。

//在文档外呈现并挂载var navbar=new navbar()。$ mount()document . getelementbyid(' app ')。appendchild (navbar。$ El)二。$destroy()销毁方法

角色：完全销毁一个实例。

销毁Vue实例后调用。调用后，与Vue实例相关的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。

div id=' app '/div button onclick=' destroy()' destroy/button在组件中挂载被破坏的生命周期钩子

var NavBar=Vue . extend({ template : ` div div { { title } }/div H2 { { num } }/H2 button @ click=' add ' add/button/div `，Data(){ return { title : ' Vue global extension component '，num : 10 } } expended(){ console . log(' expended ')}，methods: {add () {this。num } } })//使用全局扩展组件并将其挂载到id #中。//销毁功能destroy(){ //点击按钮销毁vm实例，控制台会输出“已销毁”，再次点击时不会输出，如果点击添加按钮，数字也不会改变，表示VM已经销毁。$ Destroy()}

第三，$forceUpdate()更新方法

方法是强制Vue实例重新呈现。注意：它只影响实例本身和插入插槽内容的子组件，而不是所有子组件。

看看代码：

button onclick=' reload()' refresh/button//同样，为了看数据是否再次更新，也就是是否执行了reload方法，我们增加了updated选项updated(){ console.log('数据重新渲染')}//III。更新数据方法函数reload () {vm。$ forceupdate ()}单击更新按钮，控制台将输出打印在更新的钩子中，表示Vue实例已被重新呈现。

四、$nextTick()数据修改方法

参数：{ Function }[回调]

这个方法是在构造函数数据中的数据被修改后触发的，相当于更新后的hook函数，但还是有区别的：它是在执行后执行更新后的hook函数内部的回调函数。也就是说，回调被延迟到下一个DOM更新周期之后。修改后立即使用数据，然后等待DOM更新。

Methods: {add(){ //更改此数据。不行。$ next tick(function(){ console . log(' DOM现在更新')}) }}，updated(){ console.log('数据更新为：' this。数字)}

从控制台的打印结果中，我们可以看到当数据发生变化时，更新后的钩子在$nextTick中的回调之前。

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。谢谢你的支持。