vue生命周期

最新推荐文章于 2024-08-27 16:10:45 发布

jhao96

最新推荐文章于 2024-08-27 16:10:45 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue项目 Vue面试问题整理

本文链接：https://blog.youkuaiyun.com/jhgx11/article/details/102983420

Vue项目同时被 2 个专栏收录

2 篇文章

订阅专栏

Vue面试问题整理

1 篇文章

订阅专栏

本文详细介绍了Vue实例的生命周期，包括创建、运行和销毁三个阶段，每个阶段对应的成员方法及其应用场景。在创建阶段，如beforeCreate和created适合进行数据初始化；在运行阶段，如beforeUpdate和updated用于响应数据变化后的DOM更新；而在销毁阶段，beforeDestroy和destroyed则用于清理资源。通过示例展示了每个阶段的方法如何工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue生命周期

什么是vue实例？

vue生命周期指的是vue实例（或组件）从诞生都消亡所经历的各个阶段的总和。

生命周期有哪些阶段？

生命周期分为三个阶段：创建，运行，销毁。
创建阶段由空白期，Date初始化，methods初始化，模板渲染等4主要部分组成。
运行阶段分为更新前，更新后两个部分组成。
销毁阶段分为销毁前，销毁后两部分组成。
每个阶段成员方法
每个阶段在vue实例中都有对应的成员方法，可以定义，执行，感知。
创建阶段的成员方法： beforeCreate，created，beforeMount，mountd。
运行阶段的成员方法： beforeUpdate，updated。
销毁阶段的成员方法： beforeDestroy，destroyed

生命周期各个阶段分析

不同阶段都会完成不同的任务，我们可以根据不同阶段的特点完成业务需要的相关功能

创建阶段分析

创建阶段有4个方法，这些方法与Vue实例的el，data是并列关系
**注**：创建阶段只要设置就会自动执行，并按顺序只执行一次

new Vue({
	el：'#App',
	data:{},
	beforeCreate(){ },
	created(){ },
	beforeMount(){ },
	mounted(){ },
})

beforeCreate:这个阶段，Vue实例刚创建好，没有任何成员，只有this。
created：内部完成的data，methods等成员的设置，这个阶段是data初始化的最好时机（data刚刚创建完成，还没有渲染到div容器中，此阶段可以用于首屏获取数据操作）
beforeMount：此阶段Vue实例把div容器给获取到，但是div中的内容还是没有被编译的原始代码。
mounted：此时Vue实例已经完成了div容器内容的编译，编译好的内容也渲染到给div容器（这个阶段是用于初始化页面DOM操作的好时机）

如图，创建阶段各方法实现的功能，（el，data，geDate显示各个方法阶段的状态）
在这里插入图片描述

运行阶段分析

运行阶段不会自动执行，当data成员数据发送改变时，就会执行，并且数据变化多次，方法也执行多次
beforUpdate可以感知到数据变化之前，数据在页面中的样子
updated感知到数据变化之后，数据在页面中的样子

new Vue({
    //运行阶段成员方法
	beforeUpdate(){},
	updated(){}
})

如图，运行阶段各方法实现的功能，（页面内容改变时执行）
在这里插入图片描述

销毁阶段分析

销毁阶段也不会自动运行，需要vue实例对象调用$dsetroy()方法
beforeDsetroy: vue实例销毁前
dsetroy：vue实例销毁后

new Vue({
	//销毁阶段成员方法	
	beforeDestroy(){ 实例销毁之前 }
	destroyed(){ 实例销毁之后 }
})

如图，销毁阶段各方法实现的功能，（需要vue实例调用$destroy()执行查看）在这里插入图片描述

完整应用试例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!--创建一个div容器，vue对该容器进行控制，设置要显示的内容-->
  <div id="app">
    <h2>{{ msg }}</h2>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      // 1) 生命周期创建阶段(4个函数),会自动执行
      beforeCreate(){
        // Vue实例已经创建完毕，但是相关的成员都没有，el、methods、data等等都没有
        console.group('--------beforeCreate发生调用--------')
        console.log('%c%s','color:red','el现在的样子：'+this.$el)     // undefined
        console.log('%c%s','color:red','data现在的样子：'+this.$data) // undefined
        console.log('%c%s','color:red','getDate现在的样子：'+this.getDate)  // undefined
      },
      created(){
        // 该阶段是一个【重要】阶段，此时data 和 methods已经准备好了，但是还没有去找div容器
        // 此阶段可以用于页面首屏数据获取操作，获取回来的数据存储给data的某个成员即可
        console.group('--------created发生调用--------')
        console.log('%c%s','color:red','el现在的样子：'+this.$el)      // undefined
        console.log('%c%s','color:red','data现在的样子：'+this.$data)  // 实体
        console.log('%c%s','color:red','getDate现在的样子：'+this.getDate)  // 实体
      },
      beforeMount(){
        // 此阶段完成了Vue实例对象 与 div容器联系的过程(本质是div容器已经被Vue实例获取到了)
        // 但是div容器的内容还是没有编译前的原生内容
        console.group('--------beforeMount发生调用--------')
        console.log('%c%s','color:red','el现在的样子：'+this.$el)      // 实体
        console.log(document.getElementsByTagName('h2')[0])  // 
      },
      mounted(){
        // 此阶段 Vue实例已经完成了div容器的内容的编译，并且编译好的内容也渲染给div容器了
        console.group('--------mounted发生调用--------')
        console.log('%c%s','color:red','el现在的样子：'+this.$el)      // 实体
        console.log(document.getElementsByTagName('h2')[0])  // 容器编译【后】实体内容
      },

      // 2) 生命周期运行阶段(2个函数),data数据变化后才会执行
      beforeUpdate() {
        console.group('---------beforeUpdate调用--------')
        console.log(
            '%c%s',
            'color:red',
            'h2数据更新【前】的效果：' + document.querySelector('h2').innerHTML
        )
      },
      updated() {
        console.group('---------updated调用--------')
        console.log(
          '%c%s',
          'color:red',
          'h2数据更新【后】的效果：' + document.querySelector('h2').innerHTML
        )
      },
      
      // 3) 生命周期销毁阶段(2个函数),只有vm调用$destroy()方法后才执行
      beforeDestroy() {
        console.group('---------beforeDestroy调用--------')
        console.log('%c%s', 'color:red', 'el现在的样子：' + this.$el)
      },
      destroyed() {
        console.group('---------destroyed调用--------')
        console.log('%c%s', 'color:red', 'el现在的样子：' + this.$el)
      },
      
      el: '#app',
      data: {
        msg: '生命周期学习篇'
      },
      methods: {
        getDate(){
          console.log('Sunday')
        }
      }
    })
  </script>
</body>
</html>