Vue中mounted生命周期函数详解

小蓝 • 2024-12-12 11:58 • 编程

一、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操作和异步数据请求，并且可以使用第三方库和插件来增强组件的功能。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236160.html