本文主要給大家介紹的是關(guān)于Vue.js實(shí)例方法之生命周期的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，學(xué)習(xí)的朋友們下面來(lái)一起看看詳細(xì)的介紹：

創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10年品質(zhì)，值得信賴(lài)！

一、$mount()掛載方法

$mount是用來(lái)掛載擴(kuò)張的。如果 Vue 實(shí)例在實(shí)例化時(shí)沒(méi)有收到 el 選項(xiàng)，則它處于“未掛載”狀態(tài)，沒(méi)有關(guān)聯(lián)的 DOM 元素?？梢允褂?code> vm.$mount() 手動(dòng)地掛載一個(gè)未掛載的實(shí)例。

比如我們擴(kuò)張了一個(gè)全局組件，通過(guò)$mount手動(dòng)的掛載到DOM上，也就生成了一個(gè)Vue實(shí)例。

擴(kuò)張一個(gè)全局組件，并且掛載到DOM上。

//擴(kuò)張全局的組件
var navBar = Vue.extend({
 template: `
{{ title }}
`,
 data(){
 return {
  title: 'Vue 擴(kuò)展的全局組件'
 }
 },
 mounted(){
 console.log('掛載上了')
 }
})

//使用全局?jǐn)U張的組件，掛載到id為#app的DOM上（會(huì)替換#app）
var vm = new navBar().$mount('#app');

//或者
var vm = new navBar({el: "#app"})

如果沒(méi)有提供 elementOrSelector 參數(shù)，模板將被渲染為文檔之外的的元素，并且必須使用原生DOM API把它插入文檔中。

//在文檔之外渲染，并且掛載
var navbar = new navBar().$mount()
document.getElementById('app').appendChild(navbar.$el)

二、$destroy()銷(xiāo)毀方法

作用：完全銷(xiāo)毀一個(gè)實(shí)例。

Vue 實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，Vue 實(shí)例相關(guān)的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。

銷(xiāo)毀

在組件中掛載destroyed生命周期鉤子

var navBar = Vue.extend({
 template: `

   
{{ title }}
   
{{ num }}
   add
  
`,
 data(){
 return {
  title: 'Vue 全局?jǐn)U展組件',
  num: 10
 }
 }
 destroyed(){
 console.log('銷(xiāo)毀了')
 },
 methods: {
 add(){
  this.num++
 }
 }
})

//使用全局?jǐn)U張的組件，掛載到id為#app的元素上
var vm = new navBar().$mount('#app');

//銷(xiāo)毀
function destroy(){
 //點(diǎn)擊按鈕，銷(xiāo)毀vm實(shí)例，控制臺(tái)會(huì)輸出‘銷(xiāo)毀了'，當(dāng)再次點(diǎn)擊的時(shí)候不會(huì)輸出，而且點(diǎn)擊add按鈕，數(shù)量也不會(huì)改變，說(shuō)明已經(jīng)銷(xiāo)毀了
 vm.$destroy()
}

三、$forceUpdate()更新方法

該方法是迫使Vue實(shí)例重新渲染。注意：它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

看代碼：

刷新

//同樣的，為了看到是否重新更新了數(shù)據(jù)，即是否執(zhí)行了reload方法，我們?cè)趯?shí)例中添加updated選項(xiàng)
updated(){
 console.log('數(shù)據(jù)重新渲染了')
}

//三、更新數(shù)據(jù)方法
function reload(){
 vm.$forceUpdate()
}

點(diǎn)擊更新按鈕，控制臺(tái)打印出updated鉤子中的輸出，說(shuō)明Vue實(shí)例重新渲染了。

四、$nextTick()數(shù)據(jù)修改方法

參數(shù)： {Function} [callback]

該方法是構(gòu)造器data中的數(shù)據(jù)被修改后觸發(fā)，相當(dāng)于updated鉤子函數(shù)，但還是有區(qū)別的：它是在updated鉤子函數(shù)執(zhí)行完之后執(zhí)行其里邊的回調(diào)函數(shù)。也就是將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。

methods: {
 add(){
  //更改數(shù)據(jù)
  this.num++
  this.$nextTick(function(){
   console.log('DOM現(xiàn)在更新了')
  })
 }
},
updated(){
 console.log('數(shù)據(jù)更新成：'+this.num)
}

通過(guò)控制臺(tái)的打印結(jié)果，可以看到，當(dāng)數(shù)據(jù)改變時(shí)，updated鉤子早于$nextTick中的回調(diào)。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。