《图解Vue3.0》- 第13节 组件生命周期

·  阅读 327

这是我参与8月更文挑战的第8天,活动详情查看:8月更文挑战

vue3的生命周期

挂载阶段
  • beforeCreate(创建前)
  • created(创建后)
  • beforeMount(挂载前)
  • mounted(挂载后)
更新阶段
  • beforeUpdate(更新前)
  • updated(更新后)
卸载阶段
  • beforeUnmount(vue2.0是beforeDestroy)(销毁前)
  • unmounted(vue2.0是destroyed)(销毁后)

创建前(beforeCreate)

对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。

创建后(created)

对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。

挂载前(beforeMount)

对应的钩子函数是beforemount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。

挂载后(mounted)

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。

更新前(beforeUpdate)

对应的钩子函数是beforeUpdate。在这一阶段,vue遵循数据驱动DOM的原则;beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。

更新后(updated)

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

销毁前(beforeDestroy)

对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新,当我们不在需要vue操纵DOM时,就需要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前,会触发beforeDestroy钩子函数。

销毁后(destroyed)

对应的钩子函数是destroyed。在销毁后,会触发destroyed钩子函数。

vue的生命周期的思想贯穿在组件开发的始终,通过熟悉其生命周期调用不同的钩子函数,我们可以准确地控制数据流和其对DOM的影响;vue生命周期的思想是Vnode和MVVM的生动体现和继承。

示例

app.vue

<template>
  <div>
    <Lifesycle v-if="show"></Lifesycle>
    <button @click="unMount">卸载</button>
  </div>
</template>

<script>
import Lifesycle from '@/components/生命周期/lifesycle.vue'

export default {
  name: 'App',
  components: {
    Lifesycle,
  },
  data() {return { show: true }},
  methods: {
    unMount:function() { this.show = !this.show; }
  }
}
</script>
复制代码

lifesycle.vue

<template>
  <div class="container">
      <div>click {{ count }} times</div>
      <button @click="clickBtn">更新</button>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  data() { return { count: 0 }},
  methods: { clickBtn:function() { this.count++ } },
  beforeCreate() {
    console.log('beforeCreate: 我在创建前显示');
  },
  created() {
    console.log('created: 我在创建后显示,可以在我的里面做一些数据请求');
  },
  beforeMount() {
    console.log('beforeMount: 我在挂载前显示');
  },
  mounted() {
    console.log('mounted: 我在挂载后显示,此时DOM已经被渲染出来了');
  },
  beforeUpdate() {
    console.log('\n');
    console.log('beforeUpdate: 我在更新前显示');
  },
  updated() {
    console.log('updated: 我在更新后显示');
  },
  beforeUnmount() {
    console.log('\n');
    console.log('beforeUnmount: 我在卸载前显示');
  },
  unmounted() {
    console.log('unmounted: 我在卸载后显示');
  },
})
</script>
复制代码

每个周期具体适合哪些场景
  • beforecreate : 可以在这加个loading事件,在加载实例时触发
  • created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
  • mounted : 挂载元素,获取到DOM节点
  • updated : 如果对数据统一处理,在这里写上相应函数
  • beforeUnmount : 可以做一个确认停止事件的确认框
  • nextTick : 更新数据后立即操作dom
分类:
前端
标签: