vue3基础入门-p04-生命周期钩子函数

平台开发 > vue3入门基础 vue3

字数:858

生命周期与钩子函数

生命周期与钩子函数

生命周期介绍

vue生命周期钩子函数
简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期

实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为
注意：vue再执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
注意：钩子函数的名称都是固定的！！！

vue的生命周期

钩子函数 - beforeCreate()

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
vue实例生命周期参考1
vue实例生命周期参考2
使用场景：发送请求获取数据

钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

钩子函数 - updated()

说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeUnmount()

说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - unmounted()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

钩子实例

<body>
<div id="app">
    <h1>{{ msg }}</h1>
</div>

<script src="./node_modules/vue/dist/vue.global.js"></script>

<script>
    const app = Vue.createApp({
        // data 提供了vue中使用的数据
        data() {
            return {
                msg: 'hello vue'
            }
        },
       beforeCreate() {
          console.warn('===>beforeCreate', '会在vue实例数据初始化前面执行')
          console.warn("this.msg:",this.msg)
        },
        created() {
          console.warn('===>created', '会在vue实例数据初始化后面执行')
          console.warn("this.msg:",this.msg)
        },
        beforeMount() {
          console.warn('===>beforeMount', '在渲染的结构替换el之前')
          console.warn("#app标签里面的元素:",document.querySelector('#app').innerHTML)
        },
        mounted() {
          console.warn('===>mounted', '在渲染的结构替换el之后')
          console.warn("#app标签里面的元素:",document.querySelector('#app').innerHTML)
        },
        beforeUpdate() {
          console.warn('===>beforeUpdate', '数据发生了改变，DOM更新之前')
          console.warn("#app标签里面的元素:",document.querySelector('#app').innerHTML)
        },
        updated() {
          console.warn('===>updated', '数据发生了改变，DOM更新之后')
          console.warn("#app标签里面的元素:",document.querySelector('#app').innerHTML)
        }
    })

    const vm = app.mount('#app')

    window.vm = vm
</script>
</body>

钩子函数

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。