Vue進入頁面時函數調用

一、什麼是Vue進入頁面時函數調用

Vue進入頁面時函數調用是指在Vue實例初始化時自動調用的函數，這些函數可用於初始化數據、執行非同步請求、添加監聽器和其他一些編程任務。它們在Vue實例創建後執行，可用於處理數據和調用其他生成的組件、指令或過濾器。

一些常見的Vue進入頁面時函數調用包括created、mounted、beforeCreate和beforeMount。接下來將針對這些函數進行詳細講解。

二、created函數

created函數是在Vue實例創建之後立即調用的函數，在這個函數內可以進行數據初始化，並可以執行一些初始數據獲取、非同步請求等操作。created函數是可以使用this關鍵字引用Vue實例的，所以可以通過該函數進行Vue實例的初始化。

created () {
  this.message = 'Hello World!'
}

在以上代碼中，我們使用created函數將message屬性初始化為’Hello World!’。

三、mounted函數

mounted函數是在Vue實例完成掛載後調用的函數。在mounted函數內，可以對DOM進行操作，如添加監聽器、初始化值、設置樣式等。mounted函數也可以用於非同步請求、計算屬性的初始化以及其他一些非同步任務。與created函數一樣，掛載完成後使用this關鍵字可以引用Vue實例。

mounted () {
  this.$nextTick(function () {
    // DOM更新後回調
  })
}

在以上代碼中，我們使用mounted函數，監聽DOM更新後的回調操作。

四、beforeCreate函數

beforeCreate函數是在Vue實例被創建後立即調用的函數，在這個函數內，可以進行一些Vue實例的屬性和方法的初始化，但是此時Vue實例還沒有初始化完畢，所以在beforeCreate函數中不能訪問data、computed、methods和watch等實例屬性。通常在這個函數上可以進行一些全局方法或插件的初始化等操作。

beforeCreate () {
  Vue.prototype.$http = axios
}

在以上代碼中，我們將Axios庫設置為Vue實例的全局變數。

五、beforeMount函數

beforeMount函數是在Vue實例掛載到DOM之前調用的函數。在這個函數內，可以進行一些初始化的操作，並可以對即將渲染的DOM進行修改。與beforeCreate函數一樣，此時實例還沒有渲染DOM，因此beforeMount函數中不能進行直接訪問 DOM 元素的操作。

beforeMount () {
  this.$refs.div.innerText = 'New text'
}

在以上代碼中，我們使用beforeMount函數，修改ref為’div’的DOM元素的inner text為’New text’。

六、總結

Vue進入頁面時函數調用是Vue實例初始化時自動調用的函數，常用的有created、mounted、beforeCreate和beforeMount函數。created函數用於初始化數據，mounted函數用於監聽DOM更新後操作，beforeCreate函數用於進行全局方法或插件的初始化，beforeMount函數用於對即將渲染的DOM進行修改。這些函數都是在Vue實例初始化時自動調用的，開發者需要根據實際需求選擇使用。