vue最早可以读取this的生命周期函数

在Vue中,最早可以安全地读取到this(即Vue实例及其属性,如data、methods等)的生命周期函数是created

created 钩子在实例创建完成后被立即调用。在这一步,实例已完成以下配置:

  • 数据观测(data observer)
  • 计算属性(computed)
  • 方法(methods)
  • 侦听器(watchers)

此时,你可以访问到datacomputed等属性,并且可以对它们进行操作。但是,由于此时还没有开始挂载过程,所以$el属性还不指向任何DOM元素,即你无法通过DOM API来访问页面上的元素。

如果你需要在Vue实例创建后立即执行某些操作,比如发送请求获取数据并更新到组件的状态中,那么created是一个很好的选择。

Vue的生命周期函数顺序大致如下(从早到晚):

  1. beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。此时,组件的datacomputedmethodswatch等属性都还未被初始化,因此无法访问到它们。

  2. created:在实例创建完成后被立即调用。在这一步,实例已完成所有的数据观测、计算属性和方法的配置,但是还没有挂载到DOM,$el属性目前不可见。

  3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

  4. mounted:el 被新创建的 vm. e l 替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当 m o u n t e d 被调用时 v m . el 替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当 mounted 被调用时 vm. el替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。

因此,如果你需要在Vue实例创建后尽早地访问其属性或方法,但又不需要直接操作DOM,那么created生命周期函数是最佳选择。

你可能感兴趣的:(Vue基础知识,redis,数据库,缓存)