对vue生命周期的理解

最新推荐文章于 2023-03-21 10:22:16 发布

weixin_46389498

最新推荐文章于 2023-03-21 10:22:16 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/weixin_46389498/article/details/105079399

版权

什么叫生命周期?

组件从创建到销毁的一系列过程叫做组件的生命周期
vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行.
组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁

初始化阶段：beforeCreat created beforeMount mounted

运行中阶段:beforeUpdate updated

销毁阶段:beforeDestroy destroyed

接下来创建一个简单的实例，在不同的生命周期下观察dom渲染和挂载情况

代码示例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <template id="my-component">
        <div>
            <h1 id="title">hello-------{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
        </div>
    </template>
    <script src="./base/vue.js"></script>
    <script>
        // 初始化阶段
        // 一个组件或者实例的生命周期都是通过new开始的
        // 实例化之后,内部会做一些初始化事件与生命周期相关的配置
        Vue.component('my-component', {
            template: '#my-component',
            data() {
                return {
                    msg: 1
                }
            },
            // beforeCreate这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
            // 同时页面中的真实dom节点也没有挂载出来, null
            beforeCreate(){
                console.log('beforeCreate......')
                console.log(this.msg,document.getElementById('title'))  // undefined null
            },
            // created钩子函数内部的数据已经被挂载了,但是真实dom节点还是没有渲染出来
            created(){
                // this.msg = 2222
                console.log('created......')
                console.log(this.msg,document.getElementById('title'))  // 1 null
            },
            // beforeMount代表dom马上就要被渲染出来了,但是还没有真正的在页面中渲染出来,显示为 null
            
            beforeMount(){
                console.log('beforeMount......')
                console.log(this.msg,document.getElementById('title')) // 1 null 
            },
            
            // mounted钩子函数使初始化阶段的最后一个钩子函数
            // 数据已经挂载完毕了,真实的dom也已经渲染出来了
            
            mounted(){
                console.log('mounted......')
                console.log(this.msg,document.getElementById('title'))  // 1 <h1 id='title'>hello-------1</h1>
            },
            // 运行时钩子函数初始化阶段是不会主动执行的
            // 只有dom挂载完毕了,然后再去当数据发生变化的时候,beforeUpdate这个钩子函数才会执行
            beforeUpdate(){
                console.log('beforeUpdate.....')
                console.log(this.msg,document.getElementById('title'))  // 新值 <h1 id='title'>hello-------新值</h1>
            },
            updated(){
                console.log('updated.....') 
                console.log(this.msg,document.getElementById('title'))  // 新值 <h1 id='title'>hello-------新值</h1>
            },
        // beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
            beforeDestroy(){
                console.log('beforeDestroy.....')
                console.log(this.msg,document.getElementById('title'))
            },
        // destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
            destroyed(){
                console.log('destroyed.....')
                console.log(this.msg,document.getElementById('title'))
            }
        })

        new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

weixin_46389498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对vue生命周期的理解

什么叫生命周期?组件从创建到销毁的一系列过程叫做组件的生命周期vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行.组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁初始化阶段：beforeCreat created beforeMount mounted运行中阶段:beforeUpdate updated...
复制链接

扫一扫