Vue的生命周期文章目录（Vue）的的

2024-01-07 08:02:09 阅读 0

文章目录

1.Vue生命周期阶段

vue生命周期分为四个阶段

第一阶段（创造阶段）：，

第二阶段（安装阶段）：（）、

第三阶段（更新阶段）：，

第四阶段（毁灭阶段）：，

二、生命周期钩子函数1。

官网：实例初始化后，在数据监听和事件/监听器配置之前同步调用。

详情：此阶段无法获取数据，也没有渲染出真正的DOM元素。

官网：实例创建后立即同步调用。在这一步中，实例已完成对选项的处理，这意味着以下内容已配置：数据监听、计算属性、方法、事件/监听器回调函数。然而，挂载阶段尚未开始，$el 尚不可用。

详情：这个阶段已经可以访问数据了，但是页面中真正的DOM节点还没有渲染出来。在这个钩子函数中，可以绑定相关的初始化事件并发送请求。

官网：挂载开始前调用：首次调用相关函数。

详情：表示dom即将渲染，但尚未真正渲染。这个钩子函数的用法和hook函数基本一样。它可以绑定相关的初始化事件并发送ajax操作。

官网：实例挂载后调用，el被新创建的vm.$el替换。如果根实例安装到文档中的元素，则调用时 vm.$el 也将位于文档中。

请注意，不能保证所有子组件也都已安装。如果你想等到整个视图渲染完毕后再执行某些操作，可以在内部使用 vm.$ ：

详情：挂载阶段的最后一个钩子函数，数据已挂载，真实的DOM元素已渲染。一些与实例化相关的操作可以在这个钩子函数内部完成。

官网：数据变化后、DOM更新前调用。这对于在即将更新之前访问现有 DOM 很有好处，例如删除手动添加的事件侦听器。

详细说明：该钩子函数在初始化时不会被执行。当组件挂载以及数据发生变化时会立即执行。这个钩子函数获取到的DOM内容就是更新前的内容。

官网：虚拟DOM因数据变化而重新渲染更新后调用。

当调用此钩子时，组件 DOM 已更新，因此您现在可以执行依赖于 DOM 的操作。然而，在大多数情况下，您应该避免在此期间更改状态。如果您想响应状态更改，通常最好使用计算属性或代替。

详细说明：该钩子函数获取dom的内容，并根据更新的内容生成新的虚拟dom。新的 dom与之前的 dom进行比较。差异之后，渲染出真实的dom。在钩子函数中，你可以得到由于diff算法的差异而导致的真实DOM渲染。

官网：实例销毁前调用。到这一步，实例仍然完全可用。

详细说明：当组件被销毁时，会触发这个钩子函数，代表在销毁之前，可以做一些善后操作，清除一些初始化事件和定时器相关的东西。

官网：实例销毁后调用。调用此钩子后，Vue 实例对应的所有指令将被解除绑定，所有事件监听器将被删除，所有子实例将被销毁。

详细信息：Vue 实例失去活动并完全失去功能

<template>
  <div id="app">
    <p id="box">{{msg}}p>
    <button @click="change">更新button>
  div>
template>
<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    change () {
      this.msg = 'hello world'
    }
  },
  beforeCreate () {
    console.log('---------------->beforeCreate')
    console.log(this.msg, document.getElementById('box'))
  },
  created () {
    console.log('---------------->created')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeMount () {
    console.log('---------------->beforeMount')
    console.log(this.msg, document.getElementById('box'))
  },
  mounted () {
    console.log('---------------->mounted')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeUpdate () {
    console.log('---------------->beforeUpdate')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  },
  updated () {
    console.log('---------------->updated')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  }
}
script>