vue.js中created方法作用

Vue.js 中的 created() 方法是 Vue 实例生命周期钩子函数之一，用于在 Vue 实例创建并构建完毕后被触发执行。接下来，我将详细介绍 created() 方法的作用和用法。

created() 方法的作用

在 Vue.js 应用中使用 created() 方法通常有以下一些作用：

1. 初始化一些数据，包括组件中的变量，是最常用的 created() 方法作用。
2. 加载组件时从服务器获取数据（如异步请求接口数据）。
3. 组件渲染完成时可以对 DOM 进行一些操作。比如初始化某些 DOM 元素或获取初始数据等。

created() 方法的使用

下面是 created() 方法的使用方法和示例：

方法一：基本使用

export default {
  data() {
    return {
      message: 'Hello Vue.js'
    }
  },
  created() {
    console.log('Vue.js 实例创建完毕');
    console.log('message: ' + this.message);
  }
}

上面的代码演示了最基本的 created() 方法的使用，它输出一段日志，表示 Vue.js 实例创建完毕，并打印出组件的 data() 函数返回的数据。

方法二：结合异步请求数据使用

export default {
  data() {
    return {
      todoList: []
    }
  },
  created() {
    axios.get('/api/todoList').then((res) => {
      this.todoList = res.data;
    }).catch((err) => {
      console.log(err);
    });
  }
}

上面的代码演示了在 created() 方法中结合异步请求数据，获取 todoList 列表，并将数据放入 Vue 实例的 data() 中，供组件进行展示和操作。

通过上面的两个实例，我们可以了解到 created() 方法的基本用法，它可以完成对组件的某些数据和服务器数据进行初始化的操作。

除了 created() 方法，还有其他 Vue 生命周期钩子函数，比如 beforeCreate()、mounted()、updated()、beforeDestroy() 等等，它们都有各自的用法与作用。在 Vue.js 应用开发中，选择正确的生命周期钩子函数大大提高了组件性能和开发效率。