【Vue学习】Vue 组件实例的生命周期(四个阶段,八个钩子)

一、为什么要理解生命周期?

理解生命周期就像是知道了一部电影的剧情走向,能让你在适当的时机做出反应。Vue 生命周期的钩子让你可以在不同的阶段插入你的逻辑,像是提前准备、后期清理或者在数据更新时做点事情。这种"精确控制"的能力会让你在开发过程中更加得心应手,避免做出一些不必要的错误。

二. Vue 的四个阶段和八个生命周期钩子函数

html 复制代码
<template>
  <div id="app">
    <p id="box">{{msg}}</p>
    <button @click="change">更新</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    change () {
      this.msg = 'hello world'
    }
  },
  beforeCreate () {
    console.log('---------------->beforeCreate')
    console.log(this.msg, document.getElementById('box'))
  },
  created () {
    console.log('---------------->created')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeMount () {
    console.log('---------------->beforeMount')
    console.log(this.msg, document.getElementById('box'))
  },
  mounted () {
    console.log('---------------->mounted')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeUpdate () {
    console.log('---------------->beforeUpdate')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  },
  updated () {
    console.log('---------------->updated')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  }
}
</script>
相关推荐
uhakadotcom几秒前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
weixin_457885826 分钟前
JavaScript智能对话机器人——企业知识库自动化
开发语言·javascript·自动化
吴梓穆33 分钟前
UE5学习笔记 FPS游戏制作37 蓝图函数库 自己定义公共方法
笔记·学习·ue5
慕斯策划一场流浪33 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
吴梓穆39 分钟前
UE5学习笔记 FPS游戏制作41 世界模式显示UI
笔记·学习·ue5
虾球xz1 小时前
游戏引擎学习第200天
学习·游戏引擎
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2561 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js