admin 管理员组文章数量: 887021
2024年1月5日发(作者：python多线程坑)
vue中的created的作用
1. 什么是created钩子函数
在Vue的生命周期中，created是其中一个生命周期钩子函数。created函数会在Vue实例被创建之后调用，此时Vue实例已经完成了数据观测、属性和方法的初始化，但是尚未完成DOM元素的挂载过程。
new Vue({
created: function () {
// 在此处进行初始化工作
}
})
2. created的调用时机
created钩子函数在Vue实例被创建之后立即调用。它是在实例初始化完成之后，数据观测和事件配置之前被调用的。因此，在created钩子函数中，可以访问到已经初始化的数据，并可以对数据进行一些进一步的处理和操作。
3. created的特点与作用
视图尚未挂载
在created钩子函数中，DOM元素尚未创建，因此无法访问到已存在的DOM元素。这意味着在created钩子函数中，我们无法操作DOM元素，比如获取元素的宽高等属性。
数据初始化
在created钩子函数中，实例已经完成了数据的观测和属性的初始化。这意味着我们可以在created钩子函数中访问到实例的数据，包括data中的数据、props中的数据以及计算属性computed的值。这样可以进行一些数据的初始化工作，例如发送网络请求获取数据，并将数据赋值给data中的属性。
使用场景
• 获取数据
在created钩子函数中，可以发送网络请求获取数据。例如，可以通过axios库发送异步请求，获取后端API提供的数据，并将数据保存到data属性中，从而实现数据初始化。
• 组件事件订阅与销毁
在created钩子函数中，可以订阅全局事件或者其他组件中的事件。例如，可以使用vue-bus库订阅一个全局事件，在组件销毁时，需要手动取消事件的订阅。
• 初始化非响应式的变量
在created钩子函数中，可以初始化一些非响应式的变量。Vue实例中的data属性中定义的变量会进行数据绑定，从而可以在视图中动态渲染。但是，如果我们需要在Vue实例中定义一些私有变量或者非响应式的变量，可以在created钩子函数中进行初始化。
4. created与其他生命周期函数的区别
beforeCreate和created
•
•
beforeCreate钩子函数在实例刚被创建且数据观测之前被调用，此时实例的属性和方法并未被初始化。
created钩子函数在实例已经完成了数据观测和属性初始化之后被调用，此时可以访问到已经初始化的数据。
mounted和created
•
•
mounted钩子函数在Vue实例的DOM挂载完成后被调用，此时可以访问到挂载后的DOM元素，可以进行DOM操作。
created钩子函数在Vue实例完成数据初始化之后被调用，此时DOM元素尚未挂载，无法进行DOM操作。
总结
•
•
beforeCreate和created钩子函数用于初始化数据和订阅事件；
mounted钩子函数用于操作DOM元素。
5. 示例代码
new Vue({
created: function () {
// 发送网络请求获取数据
('/api/data')
.then(response => {
= ;
})
.catch(error => {
(error);
});
// 订阅全局事件
EventBus.$on('eventName', Event);
// 初始化非响应式变量
eVariable = 'Private Variable';
},
mounted: function () {
// 操作DOM元素
this.$ext = 'Hello, Vue!';
},
beforeDestroy: function () {
// 取消事件订阅
EventBus.$off('eventName', Event);
},
destroyed: function () {
// 清理工作
}
})
总结
created钩子函数是Vue生命周期中一个重要的阶段，它在实例创建之后被调用，但是在DOM元素挂载之前。在created钩子函数中，我们可以进行数据初始化、订阅事件、发送网络请求等操作。因为created钩子函数调用时机的特殊性，它是一个非常有用的工具，可以方便地进行组件的初始化和数据准备工作。通过合理地使用created钩子函数，可以提高组件的性能和复用性。
版权声明：本文标题：vue中的created的作用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1704460392h460694.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论