Vue生命周期

最新推荐文章于 2024-07-08 18:51:22 发布

chnnds

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量663

点赞数 1

文章标签：前端 vue

本文链接：https://blog.csdn.net/chnnds/article/details/124198550

版权

首先

今天是个学习的好天气，今天我们开始分享一下什么是Vue的生命周期。‘生命周期’ 是一个任何事物都存在的东西，无论是人还是任何事物，都有一个从生到死的过程。既然说了任何事物都有生命周期同样的Vue同样具备生命周期，今天我们就来聊聊Vue的生命周期。

什么是Vue的生命周期？

官网的解释是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。生命周期又称为生命周期回调函数、生命周期函数、生命周期钩子。并且在生命周期中this的指向是vm或者组件实例对象。

下面给大家看一张生命周期的示例图：

讲解时刻：

beforeCreate()：初始化，一些默认的声明周期函数和默认的事件这时候，data和methods中的数据都没初始化
created()：初始化数据，data和methods中的数据都被初始化好了
beforeMount()：编译模板，即 <div id=“app”>{{msg}} </div> -> 在内存中生成一个编译好的最终模板字符串 -> 把这个模板字符串渲染为内存中dom。注意：只是在内存中渲染好了模板，并没有把模板挂载到页面上去，此时页面还是旧的, 简单的说结果就是在内存中渲染了一个 <div id=“app”>ok</div> 的dom元素,但是页面上还是 <div id=“app”>{{msg}} </div>
mounted()：将编译好的模板真实提换到页面中去，即将内存中渲染好的dom元素即 < div id=“app”>ok< /div>已经提换了页面上的 < div id=“app”>{undefined{msg}} < /div>
beforeUpdate()：先在内存中渲染一份最新的dom树，页面上的数据还是旧的，但是data中的数据都是最新的，页面和最新的数据尚未保存同步
updated()：将最新的dom树重新渲染到真实的页面上去，页面上的数据和data中的数据都是最新的，页面和最新的数据保存同步
beforeDestroy()：销毁之前，实例上的data和所有methods，以及过滤器、指令等等都处于可用状态，还未真正销毁
destroyed()：销毁，实例上的data和所有methods，以及过滤器、指令等等都处于不可用状态，还未真正销毁

案例分析：

Vue的生命周期就讲解完毕了，我们来看看案例分析：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>当前的n的值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            n: 1
        },
        methods: {
            add() {
                this.n++
            },
            bye() {
                this.$destroy();
            }

        },
        beforeCreate() {
            console.log('beforeCreate');
            console.log('------初始化前------')
            console.log(this.n)
        },
        created() {
            console.log('created');
            console.log('------初始化完成------')
            console.log(this.n)
        },
        beforeMount() {
            console.log('beforeMount');
            console.log('------挂载前------')
            console.log(this.n)
        },
        mounted() {
            console.log('mounted');
            console.log('------挂载完毕------')
            console.log(this.n)
        },
        beforeUpdate() {
            console.log('beforeUpdate');
            console.log('------更新前------')
            console.log(this.n)
        },
        updated() {
            console.log('updated');
            console.log('------更新完毕------')
            console.log(this.n)
        },
        beforeDestroy() {
            console.log('beforeDestroy');
            console.log('------销毁前------')
            console.log(this.n)
        },
        destroyed() {
            console.log('destroyed');
            console.log('------销毁完毕------')
            console.log(this.n)
        },
    })
</script>

</html>

今天小编讲解的就这么多啦！要加油学习啊！

chnnds

关注

1
点赞
踩
0

收藏

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

首先今天是个学习的好天气，今天我们开始分享一下什么是Vue的生命周期。‘生命周期’ 是一个任何事物都存在的东西，无论是人还是任何事物，都有一个从生到死的过程。既然说了任何事物都有生命周期同样的Vue同样具备生命周期，今天我们就来聊聊Vue的生命周期。什么是Vue的生命周期？官网的解释是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。生命周期又...
复制链接

扫一扫