当前位置: 首页> 房产> 政策 > vue2生命周期

vue2生命周期

时间:2025/8/9 8:34:09来源:https://blog.csdn.net/weixin_41549971/article/details/139938017 浏览次数:0次

目录

  • 1.Vue2.x系统自带有8个生命周期钩子函数:
  • 2.一旦进入组件会执行哪些生命周期?
  • 3. 关于vue2中的 `this.$el 和 this.$data`:
  • 4.为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?
  • 5.父组件引入子组件,那么生命周期执行的顺序是?
  • 6. 在beforeCreate||created||beforeMount中如何获取dom?
  • 7.在 Vue 2.0 中,关于何时发送请求,简洁的总结如下:

1.Vue2.x系统自带有8个生命周期钩子函数:

  • beforeCreate:组件实例初始化,但数据、DOM均未就绪。
  • created:实例创建完成,数据已观测,但DOM未挂载。
  • beforeMount:虚拟DOM已创建,即将挂载到真实DOM。
  • mounted:DOM已挂载完成,可访问和操作DOM。
  • beforeUpdate:数据更新,虚拟DOM准备重新渲染前。
  • updated:数据更新,DOM重新渲染完成。
  • beforeDestroy:实例销毁前,仍可使用实例。
  • destroyed:实例销毁完成,清理工作。

2.一旦进入组件会执行哪些生命周期?

  • beforeCreate
  • created
  • beforeMount
  • mounted

3. 关于vue2中的 this.$el 和 this.$data:

// 在这个示例中,Vue 实例被挂载到 id 为 "app" 的元素上,
// 并在 mounted 钩子中访问了 this.$el 和 this.$data。
// 但请注意,在实际开发中,我们通常直接使用 this.message 来访问和修改数据属性,
// 而不是通过 this.$data.message。
new Vue({  el: '#app',  data: function() {  return {  message: 'Hello Vue!'  }  },  mounted() {  // 访问挂载的根 DOM 元素  console.log(this.$el); // 输出:<div id="app">...</div>  // 访问响应式数据对象  console.log(this.$data); // 输出:{ message: 'Hello Vue!' }  // 但通常我们直接访问单个属性  console.log(this.message); // 输出:'Hello Vue!'  }  
});

this.$el是一个 DOM 元素,代表了 Vue 实例所挂载的根 DOM 元素。在 Vue 实例创建并挂载到 DOM后,你可以通过this.$el访问到这个根元素。例如,如果你将 Vue 实例挂载到 id 为 “app” 的元素上,那么this.$el 就会是 id 为 “app” 的 DOM 元素。

this.$data是一个对象,包含了 Vue 实例的响应式数据。在 Vue 实例中定义的 data 函数返回的对象会被代理到 Vue实例上,但如果你需要直接访问这个原始对象(而不是单个的响应式属性),你可以使用 this.$data。不过,在大多数情况下,我们直接使用this.someDataProperty 来访问和修改数据属性,而不是通过 this.$data.someDataProperty。

在这里插入图片描述
在这里插入图片描述

4.为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?

  1. 因为:如果请求是在methods封装好了,在beforeCreate调用的时候,beforeCreate阶段是拿不到methods里面的方法的(会报错了)。
  2. beforeCreate没有$data,beforeCreate拿不到methods的方法;created中有$data,created是可以拿到methods的方法的.

在这里插入图片描述

在这里插入图片描述

  1. beforeCreate 钩子: 在这个阶段,Vue 实例已经被创建,但是 data、methods、computed 和 watch等属性还没有被初始化。 因此,在 beforeCreate 钩子中,你无法访问到 data 中的数据,也无法调用 methods 中的方法。
    2.created 钩子: 在这个阶段,data 和 methods 已经被初始化,但是 DOM 还没有被挂载。 你可以在 created钩子中访问到 data 中的数据,并可以调用 methods 中的方法。

5.父组件引入子组件,那么生命周期执行的顺序是?

父:beforeCreate、created、beforeMount
子:beforeCreate、created、beforeMount、mounted

父:mounted

在这里插入图片描述

6. 在beforeCreate||created||beforeMount中如何获取dom?

  1. 只要写异步代码,获取dom是在异步中获取的,就可以了。
    例如:setTimeout、axios请求、Promise.xxx()等等…
  2. 使用vue系统内置的this.$nextTick
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

7.在 Vue 2.0 中,关于何时发送请求,简洁的总结如下:

  • 在 created 中:如果请求不依赖于 DOM 元素,并且希望尽早开始加载数据,可以在 created 钩子中发送请求。
  • 在 mounted 中:如果请求需要访问或操作 DOM 元素,或者想要避免在用户看到“空”组件后等待数据加载的“闪烁”效果,那么在 mounted 钩子中发送请求更为合适。
  • beforeCreate 和 beforeMount 通常不推荐用于发送请求,因为在这两个阶段发送请求可能存在数据状态不完整或延迟的问题。
    以上都不是最核心的区别。

这个问题具体要看项目和业务的情况了,因为组件的加载顺序是,父组件引入了子组件,那么先执行父的前3个生命周期,再执行子的前4个生命周期,那么如果我们的业务是父组件引入子组件,并且优先加载子组件的数据,那么在父组件中当前的请求要房mounted中,如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。

关键字:vue2生命周期

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: