【Vue】生命周期

最新推荐文章于 2024-07-20 16:46:53 发布

叨叨凡

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量243

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qaqcfff/article/details/123589658

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

生命周期

又名：
生命周期回调函数、生命周期函数、生命周期钩子

是什么：
Vue在关键时刻帮我们调用的一些特殊名称的函数

备注：
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的*
生命周期函数中的this指向的是vm 或组件实例对象

beforeCreated:
1.初始化了生命中期及事件，但数据代理还未开始。
2.此时无法通过vm访问到data中的数据、methods中的方法。

created:
1.初始化：数据监测、数据代理。
2.此时可以通过vm访问到data中的数据、methods中配置的方法。

beforeMounted:
1.此阶段Vue解析生成虚拟DOM存储在内存中，页面还不显示解析好的内容。
2.页面呈现的是未经过Vue编译的DOM结构。
3.所有DOM的操作，最终都不奏效。

mounted:
1.将内存中的虚拟DOM转为真实DOM插入页面。
2.此时页面中呈现的是经过Vue编译的DOM。
3.对DOM的操作均有效（尽可能避免）。
4.一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义实践等初始化操作。

beforeUpdate:
1.此时，数据是新的，但页面时旧的，即：页面尚未和数据保持同步。
2.根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即Model->View的更新。

updated：
1.此时：数据时新的，页面也是新的。即：页面和数据保持同步。

beforeDestroy：
1.此时，vm中的所有的data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。

destroyed：
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

案例：

<html>
<head>
    <meta charset='UTF-8'>
    <title>生命周期</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>
<body>
    <div id='root'>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁案例</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            n : 1
        },
        methods:{
            add(){
                this.n++
            },
            bye(){
                console.log('bye')  
                this.$destroy()
            }
        },
        //在数据检测和数据代理创建之前
        //此时，无法通过vm访问到data中的数据
        //完成了初始化：生命周期、事件，但数据代理还未开始
        beforeCreat(){
            console.log('beforeCreat')
        },
        //初始化：数据监测、数据代理
        //此时，可以通过vm访问到data中的数据，methods中配置的方法
        created(){
            console.log('creatd')
        },
        //此时，页面呈现的是未经Vue编译的DOM结构
        //所有对DOM的操作，最终都不奏效
        beforeMount(){
            console.log('beforeMounted')
            
        },
        //vue完成模板的解析，并把初始的真实的DOM放入页面后（挂载完毕后）调用DOM
        //1.页面中呈现的时经过Vue编译的DOM。
        //2.对DOM的操作均有效（尽可能避免），至此，初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义时间等初始化操作
        mounted(){
            console.log('mounted')
            
        },
        beforeUpdated(){
            console.log('beforeUpdated')
        },
        updated(){
            console.log('updated')
            
        },
        beforeDestroy(){
            console.log('beforeDestroy')
            
        },
        destroyed(){
            console.log('destroyed')
            
        }
    })
    //通过外部定时器实现（不推荐）
    // setInterval(()=>{
    //     vm.opacity -= 0.01
    //     if(vm.opacity <= 0) vm.opacity = 1
    // },16)
</script>
</html>

叨叨凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】生命周期

生命周期又名：生命周期回调函数、生命周期函数、生命周期钩子是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数备注：生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的*生命周期函数中的this指向的是vm 或组件实例对象beforeCreated:1.初始化了生命中期及事件，但数据代理还未开始。2.此时无法通过vm访问到data中的数据、methods中的方法。created:1.初始化：数据监测、数据代理。2.此时可以通过vm访问到data中的数据、metho
复制链接

扫一扫