vue面试（三）——组件(或实例)生命周期以及父子组件生命周期执行顺序

最新推荐文章于 2024-10-18 21:09:26 发布

徕胖

最新推荐文章于 2024-10-18 21:09:26 发布

阅读量366

点赞数

分类专栏： vue JavaScript html

本文链接：https://blog.csdn.net/leilei7407/article/details/117108663

版权

本文详细探讨了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted等创建期间的钩子，以及运行阶段的beforeUpdate和updated。在created阶段，数据已完成初始化，但DOM未渲染。mounted阶段则表示DOM已渲染完成。更新阶段的beforeUpdate和updated仅在数据变化时触发。在销毁期间，beforeDestroy用于执行善后操作。同时，文章还讲解了父子组件生命周期的执行顺序，指出若父组件数据不变，子组件不会触发更新。

摘要由CSDN通过智能技术生成

vue生命周期函数又叫生命周期钩子，是在某个时刻会自动执行的函数
vue组件又叫实例，所以将组件生命周期又叫实例生命周期
参考链接

(1)创建期间的生命周期函数
vue生命周期函数又叫生命周期钩子，是在某个时刻会自动执行的函数
vue组件又叫实例，所以将组件生命周期又叫实例生命周期
beforeCreate是在vue组件或实例创建完成之前执行。
created是在vue组件或实例创建完成之后执行。
beforeMount是在模板渲染到页面上之前会执行
mounted是在模板渲染到页面完毕的时候会执行

created时data并且诸如methods、computed属性 props等已经初始化；那问题来了，data props computed watch methods他们之间的生成顺序是什么呢？

下面代码演示上面四个生命周期函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <h1 id='h1'>{
  {msg}}</h1>
    </div>
    <script>
        var vm = new Vue({
    
            el: '#demo',
            data:{
    
                msg:'hello'
            },
            methods:{
    
                say(){
    
                    console.log('世界你好！')
                }
            },
            //遇到的第一个生命周期函数
            //beforeCreate执行时只是创建了一个Vue实例vm,vm里面包含的data等内容并没有执行
            beforeCreate(){
    
                console.log('beforeCreate执行')
                //this.msg和this.say输出结果都是undefined：
                //说明beforeCreate执行时，data和methods并没有执行，即没有初始化data和methods
                console.log(this.msg) //undefined  
                console.log(this.say) //undefined

                //能获取到dom元素
                console.log(