理解vue3 onCreated
发布时间:2023-11-24 20:38:09
发布人:xqq
Vue3是Vue.js的下一个主要版本，它主要引入了Composition API，这阅读Vue3源码和创建高效，更容易组合的代码。其中重要的一个Hooks就是onCreated。
一、概述
onCreated与Vue2.x中的created类似，作为组件实例的一个生命周期钩子函数，当组件实例被创建时触发。在组件初始化阶段，我们可以在onCreated中进行一些基本的组件设计，比如初始化组件的数据、方法和组件的生命周期，等等。而在这个时候组件还没有被挂载到DOM上。
import { onCreated } from 'vue'
export default {
onCreated() {
console.log('Component created');
}
}
二、数据初始化
Vue3中的数据驱动与Vue2.x相比有了很大的变化。在组件创建阶段，我们通常需要进行一些组件数据的初始化。这时我们可以利用onCreated钩子函数，在组件创建时进行数据的初始化赋值。
import { onCreated, reactive } from 'vue'
export default {
setup() {
const data = reactive({
name: 'Jack',
age: 18
})
onCreated(() => {
console.log(name: ${data.name}, age: ${data.age})
})
return {
data
}
}
}
三、调用方法
除了数据初始化，我们还可以在onCreated中定义一些组件方法，通过组件实例从而调用这些方法。在组件这个生命周期中调用方法可能会在其它方法执行期间触发，因此可以在onCreated中定义一个方法引用，在其它方法中可以随时使用该引用。
import { onCreated, ref } from 'vue'
export default {
setup() {
const title = ref("Vue3 onCreated")
function sayHello(name) {
console.log(${name} say: Hello World);
}
onCreated(() => {
sayHello('Jack')
})
return {
title
}
}
}
四、组件生命周期
onCreated是组件生命周期的一部分，在组件创建时自动调用。在Vue3中，onCreated代替了Vue2.x中的created生命周期钩子函数。它是组件在Vue3中的第一个被调用的钩子函数。
Vue3组件的生命周期函数按照顺序依次为：onCreated、onMounted、onUpdated、onBeforeUnmount、onUnmounted。
import { onCreated, onMounted } from 'vue'
export default {
setup() {
onCreated(() => {
console.log('Component created');
})
onMounted(() => {
console.log('Component mounted');
})
}
}
五、总结
onCreated作为Vue3的生命周期函数之一，具有以下优点：
提供了组件实例中进行基本的组件设计和数据初始化的机会； 在组件创建阶段调用，避免组件挂载时带来的性能消耗，并且可以为其它生命周期函数提供数据基础； 在组件创建阶段提供了记录日志或调试的机会，方便开发调试。在实际开发中，我们可以灵活地使用onCreated这个生命周期函数，利用它来初始化数据、调用其他方法，以及检查组件实例的状态。
