Vue – 生命周期与函数

简介

生命周期(Life Cycle)是指一个组件从创建 -> 运行-> 销毁的整个阶段,强调的是一个时间段。 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

 

创建阶段

beforeCreate

在此阶段为Vue的初始化状态,在这期间 props/data/methods 都还没被创建,此时将不可调用各种数据。该方法声明在与 methods 同级位置上。

export default {
  props:{},
  methods:{},

  beforeCreate() {
    ...
  }

}

 

 

created

这个阶段的组件的 props/data/methods 都已经创建好了,可以访问数据类型,但是组件的模板结构尚未生成。该方法声明在与 methods 同级位置上。该方法通常用于页面加载 Axios 数据使用,非常常用。

export default {
  props:{},
  methods:{},

  created() {
    ...
  }

}

 

编译渲染

在执行 created 方法后,Vue将开始对模板结构的渲染,将会有下面的流程

1.是否有 el 参数(传入外部模板元素)

1).如果有,则是否有 template 参数 (Vue中的属性 template)

如果存在 template 参数,则取 template 中的模板数据进行渲染

如果不存在 template 参数,则使用 el 或 $mount 外部模板进行渲染

2).如果没有 el 参数,则是否有调用 $mount 涵数

如果存在 template 参数,则取 template 中的模板数据进行渲染

如果不存在 template 参数,则使用 $mount 外部模板进行渲染

渲染基于数据和模板在内存中编译生成 HTML 结构

 

 

beforeMount

在此阶段,HTML 结构已经编译生成完成,但只存在内存中,还没有挂载到页面中,此时浏览器中还没有当前组件的 DOM 结构,所以此阶段还不能直接操作读取 DOM 元素,此阶段比较少用,可以选择在此阶段进行Axios操作。

export default {
  props:{},
  methods:{},

  beforeMount() {
    ...
  }

}

 

mounted

此时已经把内存中的 HTML 结构,成功的渲染到了浏览器之中。此时浏览器中已然包含了当前组件的 DOM 结构。

export default {
  props:{},
  methods:{},

  mounted() {
    ...
  }

}

 

运行阶段

beforeUpdate

这个阶段会被多次执行,指在将要根据变化过后,最新的数据,重新渲染组件的模板结构,但页面上的数据还是旧的,因为此时还没有更新到页面上。

export default {
  props:{},
  methods:{},

  beforeUpdate() {
    ...
  }

}

 

updated

已经根据最新的数据,完成了组件 DOM 结构的重新渲染。

export default {
  props:{},
  methods:{},

  updated() {
    ...
  }

}

 

销毁阶段

beforeDestroy

将要销毁此组件,但是此时尚未销毁,组件还处于正常工作的状态,在这个过程中,Vue 会销毁当前组件的数据监听器、子组件、事件监听等

export default {
  props:{},
  methods:{},

  beforeDestroy() {
    ...
  }

}

 

destroyed

组件已经销毁,且组件中的 DOM 也已经全部移除。

export default {
  props:{},
  methods:{},

  destroyed() {
    ...
  }

}

 

如果您喜欢本站,点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件,加群提示为修改者自留,非本站信息,注意鉴别

THE END
分享
二维码
打赏
海报
Vue – 生命周期与函数
生命周期(Life Cycle)是指一个组件从创建 -> 运行-> 销毁的整个阶段,强调的是一个时间段。 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
<<上一篇
下一篇>>