vue-6 生命周期

<template>
  <div id="lifecycle">姓名<input type="text" ref="testName" /></div>
</template>
<script>
export default {
  name: 'Lifecycle',
  data() {
    return {}
  },
  created() {
    console.log('created()方法被調(diào)用，因?yàn)閏reated方法運(yùn)行時(shí)DOM未加載所以取不到testName的值')
    this.$refs.testName.value = '張無忌'
  },
  mounted() {
    console.log('mounted()方法被調(diào)用。')
    this.$refs.testName.value = '張三豐' + this.$refs.testName.value
  },
  methods: {},
}
</script>

常用事件鉤子

created 在組件實(shí)例處理完所有與狀態(tài)相關(guān)的選項(xiàng)后調(diào)用,當(dāng)這個(gè)鉤子被調(diào)用時(shí)，以下內(nèi)容已經(jīng)設(shè)置完成：響應(yīng)式數(shù)據(jù)、計(jì)算屬性、方法和偵聽器。然而，此時(shí)掛載階段還未開始，因此 $el 屬性仍不可用。該方法一般做數(shù)據(jù)初始化

mounted 在組件被掛載之后調(diào)用。

• 組件在以下情況下被視為已掛載：

  • 所有同步子組件都已經(jīng)被掛載。(不包含異步組件或 <Suspense> 樹內(nèi)的組件)

  • 其自身的 DOM 樹已經(jīng)創(chuàng)建完成并插入了父容器中。注意僅當(dāng)根容器在文檔中時(shí)，才可以保證組件 DOM 樹也在文檔中。

  這個(gè)鉤子通常用于執(zhí)行需要訪問組件所渲染的 DOM 樹相關(guān)的副作用，或是在服務(wù)端渲染應(yīng)用中用于確保 DOM 相關(guān)代碼僅在客戶端被調(diào)用。

  這個(gè)鉤子在服務(wù)端渲染時(shí)不會(huì)被調(diào)用。