在 Vue.js 中,created()
是一个重要的生命周期钩子。当一个 Vue 实例被创建后,它会立即进入一系列的初始化过程 —— 设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。这个过程中会运行很多叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
created()
钩子就是在 Vue 实例被创建后,但在数据被观测、模板被编译或挂载到 DOM 之前被调用的。具体来说:
数据观测:在 created()
钩子中,你可以访问到 data 对象中的数据,但此时 DOM 还没有被挂载,所以你不能通过 this.$el 访问到 DOM 元素。
计算属性和侦听器:在这个阶段,计算属性(computed properties)和侦听器(watchers)已经可用,但它们的依赖还没有被计算或触发。
访问 HTTP 请求:由于 DOM 还没有被挂载,所以在这个钩子中进行 HTTP 请求是一个常见的做法,尤其是当你需要在组件渲染之前获取一些数据时。
不可操作 DOM:由于 DOM 还没有被挂载,所以你不能在 created()
钩子中直接操作 DOM 元素。
下面是一个简单的例子:
javascript
export default {
data() {
return {
message: 'Hello Vue!'
};
},
created() {
console.log('Vue 实例已被创建');
console.log(this.message); // 可以访问到 data 中的数据
// 但此时不能访问 this.$el 或进行 DOM 操作
// 你可以在这里进行 HTTP 请求
fetch('some-api-endpoint')
.then(response => response.json())
.then(data => {
// 处理获取到的数据
this.someData = data;
})
.catch(error => {
console.error('Error fetching data:', error);
});
},
// ... 其他选项,如 methods、computed 等
};
注意:在 Vue 3 中,虽然大部分的生命周期钩子仍然保持不变,但有一些细微的变化和新的 API(如 setup() 函数和 Composition API)。但在 Vue 3 的 Options API 中,created() 钩子仍然以相同的方式工作。