Vue生命周期 - 就像搞对象 - 王云飞 -小四

最新推荐文章于 2024-04-28 14:17:18 发布

1230707

最新推荐文章于 2024-04-28 14:17:18 发布

阅读量268

点赞数

分类专栏： Vue JavaScript 文章标签： Vue 王云飞小四生命周期搞对象

本文链接：https://blog.csdn.net/u010544438/article/details/101510695

版权

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

关于Vue的生命周期，网上的教程说的事不清不楚，看了更加的懵逼，要想把一个较为难理解的知识点讲给小菜鸡儿们，听，必须得接地气，必须得结合现实生活！！！Vue的生命周期就像搞对象！！！

Vue2.0默认是8个生命周期

方法名	状态	含义
beforeCreate	creating 状态	实例创建之前调用
created	creating 状态	实例创建成功，此时 data 中的数据显示出来了
beforeMount	mounting 状态	数据中的 data 在模版中先占一个位置
mounted	mounting 状态	模版中的 data 数据直接显示出来了
beforeUpdate	updating 状态	当 data 数据发生变化调用，发生在虚拟 DOM 重新渲染和打补丁之前
updated	updating 状态	数据更改导致的虚拟 DOM 重新渲染和打补丁
beforeDestroy	destroying 状态	在 vue 实例销毁之前调用，此时实例任然可用
destroyed	destroying 状态	在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="container">
    <button @click="changeMsg()">change</button>
    <span>{{msg}}</span>
</div>
<script>
    var vm = new Vue({
        el:'#container',
        data:{
            msg:'TigerChain'
        },
        beforeCreate(){
            console.group("%c%s","color:red",'beforeCreate--实例创建前状态')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        created() {
            console.group("%c%s","color:red",'created--实例创建完成状态')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        beforeMount() {
            console.group("%c%s","color:red",'beforeMount--挂载之前的状态')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        mounted() {
            console.group("%c%s","color:red",'mounted--已经挂载的状态')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        beforeUpdate(){
            console.group("%c%s","color:red",'beforeUpdate--数据更新前的状态')
            console.log("%c%s","color:blue","el  :"+this.$el.innerHTML)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
            console.log("%c%s","color:green","真实的 DOM 结构:"+document.getElementById('container').innerHTML)
        },
        updated() {
            console.group("%c%s","color:red",'updated--数据更新完成时状态')
            console.log("%c%s","color:blue","el  :"+this.$el.innerHTML)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
            console.log("%c%s","color:green","真实的 DOM 结构:"+document.getElementById('container').innerHTML)
        },
        activated() {
            console.group("%c%s","color:red",'activated-- keep-alive 组件激活时调用')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        deactivated(){
            console.group("%c%s","color:red",'deactivated-- keep-alive 停用时调用')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        beforeDestroy() {
            console.group("%c%s","color:red",'beforeDestroy-- vue实例销毁前的状态')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        destroyed() {
            console.group("%c%s","color:red",'destroyed-- vue实例销毁完成时调用')
            console.log("%c%s","color:blue","el  :"+this.$el)
            console.log(this.$el);
            console.log("%c%s","color:blue","data  :"+this.$data)
            console.log("%c%s","color:blue","message  :"+this.msg)
        },
        methods: {
            changeMsg() {
                this.msg = 'TigerChain111'
            }
        }
    })
</script>
</body>
</html>

如果使用了keep-alive会是10个（activated、deactivated）

activated：来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
deactivated：组件移除时触发

示例源码及扩展实战应用在这里

根据服务端还是客户端渲染机制，生命周期依旧会发生变化

updated 不被执行
destroyed 不被执行

生命周期就像搞对象

哎呀，好无聊啊，看看人家都有对象，一起学习/一起看电影一起做爱做的事，真好。我也好想有个女朋友哦（beforeCreate，概念化阶段，什么都没有）。
你要找的女朋友是什么样的呢？首先她是个女孩子，一个嘴巴、两条腿，等等总之就是女孩子默认的特征（created，有了雏型默认的数据有了）。
我未来的女朋友要像林志玲一样、或者像我的同桌这样的就行，根据自己的喜好已经勾勒出未来女朋友的样子（beforeMount，虚拟的还没有具体的目标）。
哇，隔壁班级新来的那位女孩子不错，她就是我喜欢的类型，我要把她追到手，让她做我女朋友（mounted，有了具体的目标形成了真实的DOM展示给了用户）。
追的我好累啊还没追到手，不行我得调整下战术，不能每天找她玩了，我要好好学习Vue在积云我说第二没人敢说第一那种的，给她补课（beforeUpdate，战术已调整还未投入实战）
去班级看看她有没有什么不会的，教教她（updated，新的战术已投入试用）
这死孩子真麻烦，天天教我Vue，搞的我好像多么笨似的，我自己能搞定四哥说了，要培养自己的学习能力及解决问题的能力，真烦人（beforeDestroy，已经很烦这个小伙子了，准备拒绝他的好意）
你又来干啥玩意儿，我自己能搞定，你给我滚，滚回你们班去，你除了Vue还会啥？四哥没告诉你吗，javascript才是最重要的，你给我滚，别来烦我（destroyed，微信拉黑&隔离灭了你丫的，销毁了！！！）
给大家留一个思考题，如果我用keep-alive包裹了，那么在搞对象这件事情上，应该如何更新/书写这个故事？请在留言区留言，发表自己的言论…

王云飞@小四版权logo，转载记得一起带走哦！！！