【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>
相关推荐
Nexmoe4 小时前
我踩过最深的 React 数据沉钻坑,以及我现在偷懒写法
开发语言·javascript·ecmascript
柯南二号4 小时前
【大前端】Vue 和 React 主要区别
前端·vue.js·react.js
D11_4 小时前
【React】Redux
前端·javascript·react.js
XZSSWJS4 小时前
机器视觉学习-day09-图像矫正
学习
dreams_dream5 小时前
vue2滑块验证
前端·javascript·css
飞天小蜈蚣6 小时前
python - ( js )object对象、json对象、字符串对象的相关方法、数组对象的相关方法、BOM对象、BOM模型中 Navigator 对象
javascript·python·json
Lynnxiaowen7 小时前
今天我们继续学习shell编程语言的内容
linux·运维·学习·云计算·bash
小光学长7 小时前
基于vue驾校管理系统的设计与实现5hl93(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
wow_DG7 小时前
【前端面试题✨】Vue篇(一)
前端·javascript·vue.js