Vue生命周期与setup深入详解

在Vue中，每个组件都有自己的生命周期，其中包含了一些特定的事件和钩子函数，不同的钩子函数分别在组件的不同生命周期阶段触发，开发者可以针对不同的阶段进行函数的逻辑编写。在Vue3.x中，添加了新的组件选项setup，它也包含生命周期的概念，本文主要讲解Vue生命周期以及setup在Vue3.x中的应用和相关注意事项。

Vue生命周期

1. 创建阶段（Initialization）

   在这个阶段内，Vue会进行部分初始化的工作，从而准备好组件渲染所需的内容。

   钩子函数：

   • beforeCreate: 在实例初始化之后，数据观测(data observer)和事件/watcher事件配置之前被调用。
   • created: 在实例创建完成之后被立即调用。在此阶段中，实例已完成：数据观测(data observer)、属性和方法的运算、watch/event事件回调。该钩子函数无法负责某些延迟需要的操作。因为此时并未渲染DOM，所以无法访问 $el 对象。

2. 模板编译阶段（Template Compilation）

   在这个阶段，Vue会进行模板编译，将模板转化成渲染函数。

   钩子函数：

   • beforeMount: 在挂载开始之前被调用，此时组件内DOM节点并未创建。
   • render：此阶段会渲染DOM，无钩子函数。

3. 挂载阶段（Mounting）

   在这个阶段，Vue会将组件挂载到DOM中。

   钩子函数：

   • mounted: 在挂载完成后被调用，此时组件的DOM节点已经生成，对于需要进行一些DOM操作的逻辑，在该钩子函数中进行操作即可。

4. 更新阶段（Updating）

   当数据更新时，Vue将会重新渲染组件。

   钩子函数：

   • beforeUpdate: 在数据更新之前被调用，可以在该函数中进行已有数据的修改，从而影响到渲染时的DOM。
   • updated: 在数据更新完成后被调用，此时DOM也已经更新完成。

5. 卸载阶段（UnMounting）

   当组件被销毁时，Vue将会进入卸载阶段。

   钩子函数：

   • beforeUnmount: 在卸载开始之前被调用，此时DOM节点尚未被移除。
   • unmounted: 在卸载完成后被调用，此时DOM节点已经被移除。

setup

在Vue3.x中，新增了组件选项setup()函数。setup()函数会在组件被创建、props传递完毕，且在beforeCreate钩子函数之前调用。它接收两个参数：props(组件的props属性对象)和context(组件相关的属性和方法)。setup()函数必须返回一个对象，该对象中包含了组件中要使用到的响应式数据和方法。

示例1：setup函数的简单使用

<script>
  import { ref } from 'vue'

  export default {
    props: {
      title: String
    },
    setup(props) {
      const count = ref(0)
      const increaseCount = () => {
        count.value++
      }

      return {
        count,
        increaseCount
      }
    }
  }
</script>

在该示例中，我们定义了一个计数器变量count和一个增加计数器的函数increaseCount，并通过setup()函数将它们暴露出来。在组件模板中，在script标签内部拉取 count，以 {{}} 的方式进行绑定。ref作用是在声明变量时绑定引用关系，让变量成为响应式数据，setup()函数中的变量同样也是响应式的。

示例2：组件中的生命周期如何使用

<script>
  import { onMounted, onUnmounted } from 'vue'

  export default {
    setup(props) {
      onMounted(() => {
        console.log('mounted')
      })

      onUnmounted(() => {
        console.log('unmounted')
      })
    }
  }
</script>

在该示例中，我们使用了onMounted()和onUnmounted()函数，这两个函数在组件中属于setup()阶段。当组件被挂载到页面上时，onMounted()函数会被调用，控制台输出“mounted”；当组件被卸载时，onUnmounted()函数会被调用，控制台输出“unmounted”。

总结

setup()函数是Vue3.x中新增的重要概念，它是响应式数据和生命周期的入口，并紧密关联Vue的全局API和组合式API。了解和熟练使用Vue组件的生命周期，以及setup()函数的使用方式和注意事项，可以更好地编写Vue应用程序，并优化程序的性能。