Vue.js實例方法之生命周期詳解

發(fā)布時間：2020-10-17 12:59:02 來源：腳本之家閱讀：173 作者：前端崔小白欄目：web開發(fā)

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

一、$mount()掛載方法

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

比如我們擴張了一個全局組件，通過$mount手動的掛載到DOM上，也就生成了一個Vue實例。

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

擴張一個全局組件，并且掛載到DOM上。

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

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

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

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

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

二、$destroy()銷毀方法

作用： 完全銷毀一個實例。

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

<div id="app">

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

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

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

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

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

Vue.js實例方法之生命周期詳解

三、$forceUpdate()更新方法

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

看代碼：

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

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

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

點擊更新按鈕，控制臺打印出updated鉤子中的輸出，說明Vue實例重新渲染了。

Vue.js實例方法之生命周期詳解

四、$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)
}

Vue.js實例方法之生命周期詳解

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

Vue.js實例方法之生命周期詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽