【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>
相关推荐
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
一枚前端小能手2 小时前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99992 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
摸鱼的老谭2 小时前
Java学习之旅第二季-13:方法重写
java·学习·方法重写
不一样的少年_2 小时前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
Asort2 小时前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
木觞清2 小时前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手2 小时前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
叉歪2 小时前
纯前端函数,一个拖拽移动、调整大小、旋转、缩放的工具库
javascript
Hilaku2 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js