关于vue3生命周期的使用、了解以及用途（详细版）

生命周期目录

• 前言
• 组合式写法没有 beforeCreate / created 生命周期，并且组合式写生命周期用哪个先引哪个
• • • beforeCreate
    • created
    • beforeMount/onBeforeMount
    • mounted/onMounted
    • beforeUpdate/onBeforeUpdate
    • updated/onUpdated
    • beforeUnmount/onBeforeUnmount
    • unmounted/onUnmounted
    • ���结

      ---

      前言

      每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处

      ---

      组合式写法没有 beforeCreate / created 生命周期，并且组合式写生命周期用哪个先引哪个

      • beforeCreate

        1. beforeCreate选项式声明周期函数

        2. .在组件实例初始化之前调用（props解析已解析、data和computed等选项还未处理）

        3. 不能访问组件的实例this及其组件中的数据源和函数等

        4. 不能访问组件中的视图DOM元素

        5. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

        选项式写法:

            // 组件实例话之前    // 可以访问 props 的数据的    // 不能访问组件的实例 this 中的数据源和函数等    // 不能访问组件中的视图DOM元素 beforeCreate() {        console.log('----------------------------')        console.log('beforeCreate 组件实例话之前')        console.log(this.$props.subtitle)        console.log('不能访问组件的实例 this 中的数据源和函数等');        console.log('不能访问组件中的视图DOM元素');        // console.log(this.age)        // this.showMessage()        // console.log(document.getElementById('title').innerHTML)    },

        组合式写法：

         没有 beforeCreate 生命周期

        • created

          1. created选项式生命周期函数

          2. 在组件实例化成功后调用

          3. 可访问组件的实例this及其组件中的数据源和函数等

          4. 不能访问组件中的视图DOM元素

          选项式写法：

          // 组件视图渲染之前    // 可以访问组件中的数据，函数，自定义的属性等    // 不能访问组件中的视图DOM元素    beforeMount() {        console.log('----------------------------')        console.log('beforeMount 组件视图渲染之前')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log('不能访问组件中的视图DOM元素');        // console.log(document.getElementById('title').innerHTML)    },

          组合式写法：

          没有 created 生命周期

          • beforeMount/onBeforeMount

            1. beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子
            2. 组件视图在浏览器渲染之前调用
            3. 可访问组件实例东西（数据源、函数、计算属性等）
            4. 不能访问组件视图中的DOM元素

            选项式写法：

            beforeMount

              // 组件视图渲染之前    // 可以访问组件中的数据，函数，自定义的属性等    // 不能访问组件中的视图DOM元素    beforeMount() {        console.log('----------------------------')        console.log('beforeMount 组件视图渲染之前')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log('不能访问组件中的视图DOM元素');        // console.log(document.getElementById('title').innerHTML)    },

            组合式写法：

            onBeforeMount

            import { onBeforeMount} from 'vue'

            // 组件视图渲染之前// 能访问组件实例的东西（数据源、函数等）// 但是不能访问组件视图中的 DOM 元素onBeforeMount(() => {    console.log('------------------------')    console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')    console.log(age.value)    showMessage()    console.log('不能访问组件视图中的 DOM 元素');    // console.log(document.getElementById('title').innerHTML)})

            • mounted/onMounted

              1. mounted：选项式生命周期函数、onMounted：组合式生命周期钩子

              2. 组件视图在浏览器渲染之后调用

              3. 可访问组件实例东西（数据源、函数、计算属性等）

              4. 可以访问组件视图中的DOM元素

              选项式写法：

              Mount

                // 组件视图渲染之后    // 可以访问组件中的数据，函数，自定义的属性等    // 不能访问组件中的视图DOM元素    mounted() {        console.log('----------------------------')        console.log('mounted 组件视图渲染之后')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log(document.getElementById('title').innerHTML)    },

              组合式写法：

              onMounted

              import { onMounted} from 'vue'

              // 组件视图渲染之后// 能访问组件实例的东西（数据源、函数等）// 可以访问组件视图中的 DOM 元素onMounted(() => {    console.log('------------------------')    console.log('onMounted 组件视图渲染之后（生命周期钩子）')    console.log(age.value)    showMessage()    console.log(document.getElementById('title').innerHTML)})

              beforeUpdate/onBeforeUpdate

              1. beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子

              2. 数据源发生变化时，组件视图重新渲染之前调用

              3. 可访问组件实例东西（数据源、函数、计算属性等）

              4. 可以访问该组件中在更新之前的DOM元素，但是不能访问该组件中在更新之后的DOM元素

              选项式写法：

              beforeUpdate

               // 数据源发生改变，视图重新渲染前    // 可以访问组件中的数据，函数，自定义的属性等    // 可访问重新渲染的 DOM 元素之前的状态    beforeUpdate() {        console.log('----------------------------')        console.log('beforeUpdate 数据源发生改变，视图重新渲染前')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log(document.getElementById('title').innerHTML)    },

              组合式写法：

              onBeforeUpdate

              import { onBeforeUpdate } from 'vue'

              // 数据源发生变化，组件视图重新渲染之前// 能访问组件实例的东西（数据源、函数等）// 能访问组件视图渲染之前的 DOM 元素onBeforeUpdate(() => {    console.log('------------------------')    console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')    console.log(age.value)    showMessage()    console.log(document.getElementById('title').innerHTML)})

              • updated/onUpdated

                1. updated：选项式生命周期函数、onUpdated：组合式生命周期钩子

                2. 数据源发生变化时，组件视图重新渲染之后调用

                3. 可访问组件实例东西（数据源、函数、计算属性等）

                4. 不可以访问该组件中在更新之前的DOM元素，但是可以访问该组件中在更新之后的DOM元素

                选项式写法：

                updated

                 // 数据源发生改变，视图重新渲染后    // 可以访问组件中的数据，函数，自定义的属性等    // 可访问重新渲染的 DOM 元素之后的状态    updated() {        console.log('----------------------------')        console.log('updated 数据源发生改变，视图重新渲染后')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log(document.getElementById('title').innerHTML)    },

                组合式写法：

                onUpdated

                import { onUpdated } from 'vue'

                // 数据源发生变化，组件视图重新渲染之后// 能访问组件实例的东西（数据源、函数等）// 能访问组件视图渲染之后的 DOM 元素onUpdated(() => {    console.log('------------------------')    console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')    console.log(age.value)    showMessage()    console.log(document.getElementById('title').innerHTML)})

                • beforeUnmount/onBeforeUnmount

                  1. abeforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子

                  2. 组件实例被卸载之前调用

                  3. 可访问组件实例东西（数据源、函数、计算属性等）

                  4. 可以访问组件视图中的DOM元素

                  选项式写法：

                  beforeUnmount

                  // 组件在卸载之前    // 可以访问组件中的数据，函数，自定义的属性等    // 可访组件视图的 DOM 元素    beforeUnmount() {        console.log('----------------------------')        console.log('beforeUnmount 组件在卸载之前')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log(document.getElementById('title').innerHTML)    },

                  组合式写法：

                  onBeforeUnmount

                  import { onBeforeUnmount } from 'vue'

                  // 组件卸载之前// 能访问组件实例的东西（数据源、函数等）// 能访问组件视图 DOM 元素onBeforeUnmount(() => {    console.log('------------------------')    console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')    console.log(age.value)    showMessage()    console.log(document.getElementById('title').innerHTML)}) 

                  • unmounted/onUnmounted

                    ---

                    1. unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子

                    2. 组件实例被卸载之后调用

                    3. 可访问组件实例东西（数据源、函数、计算属性等）

                    4. 不可以访问组件视图中的DOM元素

                    5. 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接

                    选项式写法：

                    unmounted

                    // 组件已卸载    // 可以访问组件中的数据，函数，自定义的属性等    // 不可访组件视图的 DOM 元素    unmounted(){        console.log('----------------------------')        console.log('unmounted 组件已卸载')        console.log(this.$props.subtitle)        console.log(this.age)        this.showMessage()        console.log('不能访问组件中的视图DOM元素');        // console.log(document.getElementById('title').innerHTML)    }

                    组合式写法：

                    onUnmounted

                    import { onUnmounted} from 'vue'

                    // 组件卸载之后// 能访问组件实例的东西（数据源、函数等）// 不能访问组件视图 DOM 元素onUnmounted(() => {    console.log('------------------------')    console.log('onUnmounted 组件卸载之后（生命周期钩子）')    console.log(age.value)    showMessage()    console.log('不能访问组件视图中的 DOM 元素');    // console.log(document.getElementById('title').innerHTML)}) 

                    ---

                    总结

                    Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

                    在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。