在Vue中created、mounted等方法使用小结

Vue.js是一个基于MVVM模式的前端开发框架，它的核心是数据与视图的绑定，通过创建Vue实例，可以轻松地控制页面中的数据和DOM元素。在Vue.js中，生命周期钩子函数是非常重要的一部分，主要用于在Vue实例创建、挂载、更新、销毁等各个阶段进行逻辑处理，比如数据初始化、组件渲染、数据更新等。在这些生命周期函数中，created和mounted是非常常用的两个阶段，下面是它们的详细介绍以及示例说明。

created

在Vue实例创建完成后，会立即调用created方法。在这个阶段，Vue实例存在，但是DOM元素还没有挂载到页面上，也就是说，组件还没有被渲染。在created方法中，通常会处理一下数据初始化或者进行一些异步操作等。

下面是一个简单的示例，通过created方法来为组件初始化数据并且进行一些处理：

export default {
  name: 'MyComponent',
  data() {
    return {
      userList: []
    }
  },
  created() {
    // 初始化数据
    this.userList = [
      { name: '张三', age: 22 },
      { name: '李四', age: 25 },
      { name: '王五', age: 20 }
    ]

    // 发起异步请求，获取用户数据
    axios.get('/api/users').then(response => {
      const data = response.data
      // 对用户数据进行处理
      this.userList = data.map(user => ({ name: user.name, age: user.age }))
    })
  }
}

在上述示例中，我们定义了一个MyComponent组件，使用created方法进行了数据初始化和异步请求数据操作。通过初始化数据和异步请求数据，我们将自定义数据绑定到Vue实例上，如此一来，这些自定义数据就可以在组件内部的模板中进行数据渲染。

mounted

在Vue实例挂载完成之后，会立即调用mounted方法。在这个阶段，Vue实例已经存在，DOM元素也已经被创建和渲染到页面上了，此时我们可以使用一些第三方库，比如jQuery、D3等来直接操作DOM元素，或者发起异步请求来获取数据等。

下面是一个简单的示例，通过mounted方法来使用第三方插件和发送异步请求：

export default {
  name: 'MyComponent',
  data() {
    return {
      chartData: []
    }
  },
  mounted() {
    // 通过第三方插件来绘制图表
    const chart = new Chart('myChart', {
      type: 'bar',
      data: {
        labels: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'],
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgba(255,99,132,0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1,
          hoverBackgroundColor: 'rgba(255,99,132,0.4)',
          hoverBorderColor: 'rgba(255,99,132,1)',
          data: [65, 59, 80, 81, 56, 55]
        }]
      }
    })

    // 发起异步请求，获取图表数据
    axios.get('/api/chartData').then(response => {
      const data = response.data
      this.chartData = data
      // 更新图表
      chart.data.datasets[0].data = this.chartData
      chart.update()
    })
  }
}

在上述示例中，我们定义了一个MyComponent组件，使用mounted方法来使用第三方插件绘制图表和发送异步请求获取图表数据。在mounted方法中，我们首先使用Chart.js插件绘制了一张柱状图表格，然后使用Axios发送异步请求来获取数据。当数据请求完成后，我们将结果存储在data属性中，并且更新图表数据，使图表重新渲染。

通过created和mounted等生命周期函数，我们可以灵活地对Vue实例进行逻辑处理，使得我们可以更好的控制组件的渲染和数据更新等操作，以达到更好的用户体验和性能优化。