Vue的生命周期

2023-12-14 22:55:44

Vue的生命周期指的是一个组件从创建到销毁这个过程,这个过程可以分为以下几个阶段:

1. beforeCreate(创建前):在这个阶段,Vue实例还没有被创建,但是data函数和computed属性的计算结果已经被初始化。

2. created(创建后):在这个阶段,Vue实例已经创建完成,但是还没有挂载到DOM元素上。

3. beforeMount(挂载前):在这个阶段,Vue实例已经挂载到DOM元素上,但是虚拟DOM还没有被渲染成真实的DOM元素。

4. mounted(挂载后):在这个阶段,Vue实例已经挂载到DOM元素上,并且虚拟DOM已经被渲染成真实的DOM元素。

5. beforeUpdate(更新前):在这个阶段,Vue实例的数据已经更新,但是虚拟DOM还没有被重新渲染。

6. updated(更新后):在这个阶段,Vue实例的数据已经更新,并且虚拟DOM已经被重新渲染。

7. activated(激活后):在Vue 3中,activated代替了mounted和updated,表示组件被激活时调用。

8. deactivated(停用后):在Vue 3中,deactivated代替了beforeDestroy和destroyed,表示组件停用时调用。

9. beforeDestroy(销毁前):在这个阶段,Vue实例即将被销毁,但是数据和事件监听器还没有被清除。

10. destroyed(销毁后):在这个阶段,Vue实例已经被销毁,数据和事件监听器也被清除。

<template>
  <div id="app">
        {{msg}}
 </div>
</template>
<script>
        let vm=new Vue({
            el:"#app",
            data:{
                msg:'hello world'
            },
            beforeCreate(){
                console.log('vue实例初始化之前')
            },
            created() {
                console.log('vue实例初始化好了,可以访问到数据模型中的数据以及methods方法')
            },
            beforeMount() {
                console.log('实例挂载之前')
            },
            mounted(){
                console.log('实例挂载完毕,可以获取dom节点,一般不操作dom')
            },
            beforeUpdate() {
                console.log('实例发生改变之前触发该生命周期')
            },
            updated() {
                console.log('实例发生改变后页面视图发生变化,触发该生命周期')
            },
            beforeDestroy() {
                // console.log('实例销毁之前,仍然可以访问到数据模型中的数据和方法')
            },
            destroyed() {
                // console.log('实例销毁完毕,销毁了监听器和事件监听以及子组件');
            },
            methods:{
                sayHello(){
                    console.log(this.msg)
                },
            }
        });
        console.log(vm)
        setTimeout(()=>{
            vm.$destroy()            
        },3000)
    </script>

文章来源:https://blog.csdn.net/Blueskyzhw/article/details/134934501
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。