vue中的created方法 006

在 Vue.js 中，created 方法是一个生命周期钩子函数之一，用于在实例被创建后立即执行代码逻辑。created 钩子在 beforeCreate 钩子后执行，用于完成实例的初始化。可以在 created 钩子中访问 data 中的数据和 computed 计算属性，但是不能访问 DOM 元素或执行 DOM 操作，因为此时模板还没有被渲染到页面上。

通常，在 created 钩子中完成的功能包括：

• 初始化组件的数据和状态（例如调用 API 加载数据）；
• 注册非响应式的事件处理程序（例如 window 事件）；
• 访问父组件的数据和方法（使用 this.$parent 访问父实例）；
• 设置计时器和轮询（定时器）。

下面是一个简单的示例，演示了如何在 created 钩子中初始化数据并调用方法：

export default {
  created() {
    // 初始化数据
    this.username = 'John Doe';
    // 调用方法
    this.loadUserData();
  },
  data() {
    return {
      // 组件的数据
      username: '',
      email: ''
    }
  },
  methods: {
    loadUserData() {
      // 调用接口获取用户数据等操作
      // ...
    }
  }
}

在上面的示例中，created 钩子用于初始化 username 数据和调用 loadUserData() 方法，该方法负责加载用户数据。

总之， created 钩子是一个非常重要的生命周期钩子，可以在组件实例创建后执行代码，用于完成一些初始化逻辑和设置。