vue的生命周期和生命周期的四个阶段

疏影_

已于 2023-07-10 21:39:18 修改

阅读量88

点赞数

文章标签： vue 前端

于 2023-07-10 20:00:22 首次发布

本文链接：https://blog.csdn.net/Panjianbo_/article/details/131646833

版权

文章详细介绍了Vue.js中一个实例从创建、挂载、更新到销毁的完整过程，强调了生命周期钩子函数的作用，特别是created、mounted和beforeDestroy等关键钩子。通过示例代码展示了如何在不同阶段执行特定任务，如初始化渲染、操作DOM和资源清理。

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

vue的生命周期：一个vue实例从创建到销毁的整个过程

思考：

1.vue什么时候可以发送初始化渲染请求？(越早越好)

2.什么时候可以开始操作dom？(至少得dom渲染出来)

生命周期的四个阶段：创建挂载更新销毁

vue生命周期中，会自动运行一些函数，被称为生命周期钩子(让开发者在特定阶段运行自己的代码)

注意：8个钩子对应4组函数

常用的钩子函数主要有3个：

created：发送初始化渲染请求

mounted：操作dom

before Destory：释放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>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>
</html>