细说vue生命周期

最新推荐文章于 2024-10-20 22:02:42 发布

一羊迁徙

最新推荐文章于 2024-10-20 22:02:42 发布

阅读量3.2k

点赞数 4

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/107299283

版权

本文深入探讨Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed八大钩子函数的作用和应用场景，以及每个阶段的数据绑定和DOM操作能力。通过示例代码和官网生命周期图，帮助理解Vue实例从创建到销毁的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、官网生命周期图

在写这篇文章之前，看了很多其他人的文章，所以在写之前还是按照惯例先去官网扒图：
在这里插入图片描述
图片乍一看，里面包含的内容很多，但是不要慌，看完我后面的内容再回来细品这张图。

二、vue生命周期里都会发生些什么

一、八个钩子函数

beforeCreate（创建前）
created（创建后）
beforeMount(载入前)
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

二、看看demo里都会发生什么

1.首先在vue的单文件组件中写入如下代码：

export default {
   
  name: 'Home',
  components: {
   
    HelloWorld
  },
  data(){
   
    return{
   
      testData:'我是data中的数据'
    }
  },
   beforeCreate: function () {
   
      console.log('--------------beforeCreate----------------');
      console.log("元素是否挂载:" + this.$el);
      console.log("data中数据是否绑定:" + this.$data);
      console.log("data中的测试数据:" + this.testData);
  },
  created: function () {
   
      console.log('--

最低0.47元/天解锁文章