梳理一下vue中的生命周期

梳理Vue中的生命周期是了解Vue的重要组成部分之一，它可以帮助我们更好地理解Vue的工作原理以及响应式数据的流程。Vue的生命周期可以分为四个阶段：

1. 创建阶段（Creation）

在创建阶段中，Vue组件实例会执行以下生命周期钩子函数：

• beforeCreate: 在实例创建之前，常用于初始化一些非响应式的数据。

• created: 在实例创建之后，常用于获取组件的异步数据、初始化一些使用this的函数等功能。

• 挂载阶段（Mounting）

在挂载阶段中，Vue组件实例会执行以下生命周期钩子函数：

• beforeMount: 在组件挂载到DOM之前，常用于获取DOM节点、修改节点属性等操作。

• mounted: 在组件挂载之后，常用于获取一些初始化的数据、渲染视图、绑定一些事件等操作。

• 更新阶段（Updating）

在更新阶段中，Vue组件实例会执行以下生命周期钩子函数：

• beforeUpdate: 当组件的响应式数据发生变化，但还没有重新渲染视图时，会调用该钩子函数。常用于获取DOM节点、更新DOM属性、更改组件的数据等操作。

• updated: 当组件重新渲染视图之后，会调用该钩子函数。常用于获取DOM节点、更新DOM属性、更改组件的数据等操作。

• 销毁阶段（Unmounting）

在销毁阶段中，Vue组件实例会执行以下生命周期钩子函数：

• beforeDestroy: 在组件销毁之前调用，常用于销毁定时器、取消事件监听器、清空内存等操作。
• destroyed: 在组件销毁之后调用，常用于清空内存。

示例说明：

1.使用created钩子函数获取异步数据

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    this.getMessage() // 在created钩子函数中调用getMessage函数获取异步数据
  },
  methods: {
    getMessage () {
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => {
          this.message = json.title // 将异步数据赋值给message
        })
    }
  }
}
</script>

2.使用updated钩子函数更新DOM属性

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    changeMessage () {
      this.message = 'Hello Vue!' // 改变message的值
    }
  },
  updated () {
    const p = document.querySelector('p')
    p.style.color = 'red' // 更新DOM属性
  }
}
</script>

以上是关于Vue中的生命周期的详细讲解和两个示例说明，希望能够对您有所帮助。