Vue中mounted生命周期函數詳解

一、mounted介紹

在Vue中，mounted是一個生命周期函數，當Vue實例被掛載到DOM元素上後執行。在這個階段，Vue實例的數據與DOM元素已經建立聯繫，我們可以訪問到this.$el獲取Vue實例掛載的DOM元素，並操作DOM。

mounted函數的執行時機是在模板編譯成HTML之後，將它插入到頁面之前。數據已經處理完成，可在mounted函數中操作DOM元素，通過$refs引用等方式獲取DOM元素。

mounted() {
  console.log(this.$el)  // 獲取掛載的DOM元素
}

二、使用mounted獲取DOM元素

在Vue中，我們可以嘗試使用mounted獲取DOM元素，並使用DOM API進行操作。例如，我們可以在mounted中獲取到某個具體的div元素，然後為其添加一個點擊事件。

<template>
  <div ref="my-div">點擊此處</div>
</template>

<script>
export default {
  mounted() {
    this.$refs['my-div'].addEventListener('click', () => {
      console.log('div被點擊了')
    })
  }
}
</script>

上述代碼就是在組件加載完成後，在DOM元素上綁定了一個點擊事件

三、使用第三方庫和插件

在使用Vue時，我們可能會引入一些第三方庫或插件，在這種情況下，我們還可以在mounted中使用這些庫。

以使用ElementUI的message為例，我們可以在mounted中使用message進行消息提示：

<template>
  <button @click="showMessage">點擊我試試</button>
</template>
<script>
import { Message } from 'element-ui';
export default {
  mounted() {
    this.showMessage()
  },
  methods: {
    showMessage() {
      Message.success('Hello World')
    }
  }
}
</script>

四、使用異步請求獲取數據

在Vue中，我們常常需要通過異步請求從後端服務器獲取數據，然後動態渲染頁面。我們可以在mounted函數中調用異步請求函數，將獲取到的數據渲染進模板中。

下面是一個簡單的獲取數據的例子：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/list').then(res => {
        this.list = res.data
      })
    }
  }
}
</script>

五、使用第三方圖表庫

在Vue中，我們也可以使用第三方圖表庫，例如Echarts、Highcharts或D3等庫。我們可以在mounted函數中使用這些庫，來生成豐富的數據可視化圖表。

以Echarts為例，我們可以在組件中引入Echarts庫，然後將數據進行整理後，使用Echarts API進行渲染。

<template>
  <div class="chart"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  mounted() {
    const myChart = echarts.init(document.querySelector('.chart'))
    myChart.setOption({
      title: { text: 'ECharts 入門示例' },
      tooltip: {},
      xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    })
  }
}

六、小結

在Vue中，mounted是組件被掛載到DOM後觸發的生命周期函數，實例已經生成，支持DOM操作和異步數據請求，並且可以使用第三方庫和插件來增強組件的功能。