【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>
相关推荐
前端付杰6 分钟前
深入理解 IndexedDB:索引与游标查询的高效应用
前端·javascript·indexeddb
bilibilibiu灬7 分钟前
解析Vue 3中 `trigger` 函数是如何触发 DOM 更新的
vue.js
雷霆嘎子8 分钟前
UnityDots学习(四)
学习
雪中何以赠君别9 分钟前
【组件开发】基于 Vue 3 和 Element Plus 的花名册表头设置组件(el-table动态设置表头组件开发)
vue.js
李匠202410 分钟前
C++学习之游戏服务器开发十四QT登录器实现
c++·学习·游戏
江城开朗的豌豆13 分钟前
JavaScript篇:JavaScript事件循环:从厨房看异步编程的奥秘
前端·javascript·面试
iceprosurface14 分钟前
来试试用 react 的写法写 vue
vue.js
weixin_5168756524 分钟前
Vue 3 Watch 监听 Props 的踩坑记录
前端·javascript·vue.js
全栈老李技术面试27 分钟前
【高频考点精讲】JavaScript中的访问者模式:从AST解析到数据转换的艺术
开发语言·前端·javascript·面试·html·访问者模式
viperrrrrrrrrr730 分钟前
大数据学习(112)-Analytic函数集
学习