vue script結構

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    // 組件的方法
  },
  watch: {
    // watch擅長處理的場景：一個數據影響多個數據
  },
  computed: {
    // computed擅長處理的場景：一個數據受多個數據影響
  },
  beforeCreate: function() {
    // 在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。
  },
  created: function() {
    // 實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
  },
  beforeMount: function() {
    // 在掛載開始以前被調用：相關的 render 函數首次被調用。
  },
  mounted: function() {
    // 編譯好的HTML掛載到頁面完成後執行的事件鉤子
    // el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。
    // 此鉤子函數中通常會作一些ajax請求獲取數據進行數據初始化
    console.log("Home done");
  },
  beforeUpdate: function() {
    // 數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。 你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
  },
  updated: function() {
    // 因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。
    // 當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。
    // 該鉤子在服務器端渲染期間不被調用。
  },
  beforeDestroy: function() {
    // 實例銷燬以前調用。在這一步，實例仍然徹底可用。
  },
  destroyed: function() {
    // Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。
  }
};
</script>複製代碼