Visitar URL original
Vue生命周期 · Issue #7 · Leechikit/fe-knowledge · GitHub
Skip to content

Vue生命周期 #7

Open
Open

Description

@Leechikit

Vue生命周期

vue

vue

created 和 mounted 相关

  • beforecreated:el 和 data 并未初始化
  • created:完成了 data 数据的初始化,el没有
  • beforeMount:完成了 el 和 data 初始化
  • mounted:完成挂载

在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

父子组件间

先创建父组件,然后才创建子组件,当子组件创建完成并且实体dom挂载完成后父组件才挂载完成

update 相关

setTimeout(()=>{
  app.message= 'yes !! I do';
},3000)

destroy 相关

执行了destroy操作,后续就不再受vue控制了。

app.$destroy();

用途

  • beforecreate : 举个栗子:可以在这加个loading事件
  • created :在这结束loading,还做一些初始化,实现函数自执行,不依赖dom的请求放在created()
  • mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情,有依赖dom做一些其他的操作就放到mounted()
  • beforeDestory: 你确认删除XX吗?
  • destoryed :当前组件已被删除,清空相关内容

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions