第十三节——生命周期

一、概念

世间万物都有自己生命周期,vue也有这一特点,vue的生命周期可以简单分为四个阶段:创建阶段,挂载阶段,更新阶段,销毁阶段。

每个 Vue 实例在被创建时都要经过一系列的初始化过程------例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

一、创建阶段

1、beforeCreate

在组件实例创建之前调用,此时组件的数据观测、事件监听和模板编译尚未开始,因此无法访问到组件的响应式数据、计算属性、方法等

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  beforeCreate () {
    console.log("创建前")
  }

}

</script>

2、created

在组件实例创建之后调用,此时组件的数据观测、事件监听和模板编译已经完成,可以访问到组件的响应式数据、计算属性、方法等,但是还没有挂载到 DOM 上,因此无法访问到组件的元素或子组件。常用于发送网络请求

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  created () {
    console.log("创建后")
  }

}

</script>

二、挂载阶段

1、beforeMount

在组件挂载到 DOM 之前调用,此时组件的虚拟 DOM 已经创建,但是还没有插入到父容器中,可以对虚拟 DOM 进行一些操作或修改

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  beforeMount () {
    console.log("挂载前")
  }

}

</script>

2、mounted

在组件挂载到 DOM 之后调用,此时组件的虚拟 DOM 已经插入到父容器中,并且生成了真实的 DOM 节点,可以访问到组件的元素或子组件,并且可以执行一些需要 DOM 的操作。

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  mounted () {
    console.log("挂载后")
  }

}

</script>

三、更新阶段

1、beforeUpdate

在组件更新之前调用,此时组件的数据已经发生变化,但是还没有更新到 DOM 上,可以在这个钩子中获取更新前的状态,并进行一些比较或逻辑处理。

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  beforeUpdate () {
    console.log("更新前")
  }

}

</script>

2、updated

在组件更新之后调用,此时组件的数据已经更新到 DOM 上,并且完成了重新渲染,可以在这个钩子中获取更新后的状态,并进行一些后续操作或效果处理。不能在这个生命周期里做响应式操作,否则会死循环

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  updated () {
    console.log("更新后")
  }

}

</script>

四、卸载阶段

1、beforeUnmount

在组件卸载之前调用,此时组件还处于可用状态,可以在这个钩子中执行一些清理操作,如移除事件监听器、取消网络请求、停止定时器等。

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  beforeUnmount () {
    console.log("卸载前")
  }

}

</script>

2、unmounted

在组件卸载之后调用,此时组件已经从 DOM 中移除,并且停止了所有的响应式效果和事件监听,无法再访问到组件的任何属性或方法。

复制代码
<template>
  <div>
    生命周期
  </div>
</template>
<script>
export default {

  unmounted () {
    console.log("卸载后")
  }

}

</script>

十、forceUpdate

1、概念

迫使Vue实例重新(rander)渲染虚拟DOM,注意并不是重新加载组件。结合vue的生命周期,调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数,不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件

2、基本使用

把当在data里没有显示的声明一个对象的属性,而是之后给该对象添加属性,这种情况vue是检测不到数据变化的,可以使用$forceUpdate()

复制代码
<template>
  <div>
    {{ name }} <button @click="update">改变名字为李四</button>
  </div>
</template>

<script>
export default {
  methods: {
    update () {
      this.name = '李四'
      // 如果不加forceUpdate 页面不会渲染
      this.$forceUpdate()
    }
  }
};
</script>

3、注意

官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题。😈

相关推荐
heartmoonq7 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信7 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾7 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter7 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man11 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia17 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李18 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风19 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录20 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia20 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js