理解vue3 onCreated

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这个生命周期函数，利用它来初始化数据、调用其他方法，以及检查组件实例的状态。