快捷導(dǎo)航

Vue.js實(shí)例方法之生命周期詳解

更新時(shí)間：2017年07月03日 14:17:14 作者：前端崔小白

這篇文章主要給大家介紹了關(guān)于Vue.js實(shí)例方法之生命周期的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。

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

一、$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í)例。

<div id="#app"></div>

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

//擴(kuò)張全局的組件
var navBar = Vue.extend({
 template: `<div>{{ title }}</div>`,
 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()銷毀方法

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

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

<div id="app">

</div>
<button onclick="destroy()">銷毀</button>

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

var navBar = Vue.extend({
 template: `<div>
   <div>{{ title }}</div>
   <h2>{{ num }}</h2>
   <button @click = 'add'>add</button>
  </div>`,
 data(){
 return {
  title: 'Vue 全局?jǐn)U展組件',
  num: 10
 }
 }
 destroyed(){
 console.log('銷毀了')
 },
 methods: {
 add(){
  this.num++
 }
 }
})

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

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

三、$forceUpdate()更新方法

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

看代碼：

<button onclick="reload()">刷新</button>

//同樣的，為了看到是否重新更新了數(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)
}