在 Vue 2.0 中,mounted 方法是一個聲明周期鉤子函數,它是在實例被掛載到 DOM 后調用。在該鉤子函數中,我們可以訪問到已經渲染完畢的實例和DOM元素,我們可以利用它來進行一些DOM操作或初始化其他的插件和庫。
mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }
在普通情況下,Vue 會在實例掛載后立即執行 mounted 鉤子函數。但是,如果在實例中包含了異步請求或者 DOM 字段尚未完全渲染完畢,就需要使用 this.$nextTick(),以保證在下一次 DOM 更新循環時執行某個操作。
mounted: function() { this.$nextTick(function() { // Code that will run only after // the entire view has been rendered }) }
現在來看一個簡單的實例:在 mounted 鉤子函數中使用 jQuery 插件滾動到指定位置。
mounted: function () { $('html, body').animate({ scrollTop: $('.scroll-to-me').offset().top }, 1000) }
通過以上代碼,Vue 實例在掛載到 DOM 之后,就會自動執行 mounted 鉤子函數。在這個鉤子函數中,我們告訴它在動畫中滾動到指定位置,這個動畫會持續 1000 毫秒。
$nextTick() 方法還可以用于在 mounted 鉤子函數中獲取到修改后的 DOM 元素。
mounted: function () { this.$nextTick(function() { console.log(this.$el.textContent) // 'Updated!' }) this.text = 'Updated!' }
在上面的例子中,我們設置并更新了一個 data 屬性 text。如果我們在 mounted 鉤子函數中直接訪問這個屬性,我們可能會得到舊的屬性值。但是,我們可以通過在 this.$nextTick() 回調函數中訪問 $el 屬性來取得最新的結果,它會在 DOM 更新循環后執行。
總結來說,mounted 鉤子函數是 Vue 的聲明周期函數之一。它在 Vue 實例掛載到 DOM 之后立即執行,并提供了訪問已經渲染完畢的實例和 DOM 元素的機會。我們可以在其中進行一些 DOM 操作或初始化其他的插件和庫,同時使用 $nextTick() 來避免在實例數據的變化之后立刻訪問 DOM 元素導致的錯誤。