Vue3生命周期的特点

<p>Vue3是最新版本的Vue框架，它引入了许多新的特性和改进，包括更好的TypeScript支持、Composition API、Teleport（以前称为Portals）等。本篇文章将重点介绍Vue3中的组件生命周期。</p><h2>一、钩子函数的变化</h2><p>在Vue3中，一些常见的钩子函数发生了变化。例如，vue2中的<code>created</code>和<code>beforeCreate</code>钩子函数被替换为了<code>setup()</code>，并且<code>setup()</code>在二者之前执行。<code>beforeMount</code>和<code>mounted</code>函数被替换成了<code>onBeforeMount</code>和<code>onMounted</code>。<code>beforeUpdate</code> 和<code>update</code>被替换为 <code>onBeforeUpdate</code>和<code>onupdate</code>。<code>beforeDestroy</code>和<code>destroyed</code>被替换为<code>beforeUnmount</code>和<code>unmounted</code>。这些钩子函数的执行顺序与Vue2的版本相同，但是有所不同的是，在Vue3中，它们是使用ES6类定义的。</p><h2>二、setup</h2><p><code>setup</code> 函数是一个全新的组件选项。它是 Composition API 的核心，用于初始化组件实例。</p><p><code>setup</code> 函数接收两个参数：<code>props</code> 和 <code>context</code>。其中 <code>props</code> 是父组件传递给当前组件实例的属性，而 <code>context</code> 则包含了一些 helper 方法和组件选项（如 <code>attrs</code>、<code>slots</code> 和 <code>emit</code> 等）。</p><p>在 <code>setup</code> 中，我们可以使用 Vue 3 提供的多个工具函数来定义响应式数据、监听生命周期钩子、处理计算属性、声明事件处理函数等。这些函数包括：</p><ul><li><code>reactive</code>：用于创建响应式对象</li><li><code>ref</code>：用于创建一个单一的响应式值</li><li><code>computed</code>：用于创建计算属性</li><li><code>watch</code>：用于监听响应式数据的变化</li><li><code>onMounted</code>、<code>onUpdated</code> 和 <code>onUnmounted</code>：用于监听生命周期钩子</li><li><code>toRefs</code>：用于将响应式对象转换为普通对象</li><li><code>inject</code> 和 <code>provide</code>：用于跨层级组件传递数据</li><li><code>getCurrentInstance</code>：用于访问当前组件实例</li></ul><p>使用 <code>setup</code> 函数的优点是可以将相似的逻辑组织在一起，便于代码的维护和重用。此外，<code>setup</code> 函数需要返回一个对象，用于暴露组件状态和方法给模板使用，因此也提高了代码的可读性和组件的封装性。<br>例：</p><pre><code class="language-javascript">export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

// 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

// 触发事件（函数，等价于 $emit）
    console.log(context.emit)

// 暴露公共属性（函数）
    console.log(context.expose)
  }
}</code></pre><h2>三、onBeforeMount 和 onMounted</h2><p><code>onBeforeMount</code> 和 <code>onMounted</code> 是 Vue 3 中的生命周期钩子，它们分别在组件挂载之前和之后运行。下面是两个钩子函数的使用方法：</p><h3>onBeforeMount</h3><p><code>onBeforeMount</code> 钩子函数会在组件挂载到 DOM 前运行，可以用来在组件挂载前执行一些初始化操作。</p><pre><code class="language-javascript">&lt;script setup&gt;
import { onBeforeMount } from 'vue'
    onBeforeMount(() =&gt; {
      console.log('Before mount')
    })
&lt;/script&gt;</code></pre><p>在上面的例子中，我们通过 <code>onBeforeMount</code> 钩子注册了一个函数，在组件挂载前输出 <code>'Before mount'</code>。</p><h3>onMounted</h3><p><code>onMounted</code> 钩子函数会在组件挂载到 DOM 后运行，通常用于获取数据和初始化页面状态等操作。</p><pre><code class="language-javascript">&lt;template&gt;
  &lt;div&gt;{{ message }}&lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { onMounted, reactive } from 'vue'

const state = reactive({
      message: ''
    })

onMounted(() =&gt; {
      // 发送 AJAX 请求，获取数据
      fetch('/api/data')
        .then(res =&gt; res.json())
        .then(data =&gt; {
          state.message = data.message
        })
    })
&lt;/script&gt;</code></pre><p>在上面的例子中，我们通过 <code>onMounted</code> 钩子在组件挂载后发送 AJAX 请求，获取数据并更新组件状态中的 <code>message</code> 字段。</p><p>需要注意的是，在 Vue 3 中，onMounted 和 onBeforeMount 钩子需要在 setup 函数中使用。</p><h2>四、onBeforeUpdate和onUpdated</h2><p><code>onBeforeUpdate</code> 和 <code>onUpdated</code> 是 Vue 3 中的生命周期钩子函数，它们分别在组件更新之前和之后运行。下面是两个钩子函数的使用方法：</p><h3>onBeforeUpdate</h3><p><code>onBeforeUpdate</code> 钩子函数会在数据重新渲染之前运行，可以用来在组件更新前执行一些操作。</p><pre><code class="language-javascript">&lt;script setup&gt;
import { onBeforeUpdate } from 'vue'
    let count = 1
    onBeforeUpdate(() =&gt; {
      console.log('Before update', count)
    })
    const handleClick = () =&gt; {
      count++
    }
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{ count }}&lt;/p&gt;
    &lt;button @click="handleClick"&gt;增加&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre><p>在上面的例子中，我们通过 <code>onBeforeUpdate</code> 钩子注册了一个函数，在每次组件更新之前输出计数器的值。同时，在方法中添加了一个按钮点击事件，用于修改计数器的值。</p><h3>onUpdated</h3><p><code>onUpdated</code> 钩子函数会在数据重新渲染后运行，通常用于更新 DOM、执行动画或获取最新的状态等操作。</p><pre><code class="language-javascript">&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;button @click="handleClick"&gt;获取最新的消息&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { onMounted, onUpdated, ref } from 'vue'
    const message = ref('Hello, world!')
    onMounted(() =&gt; {
      // 模拟异步获取消息
      setTimeout(() =&gt; {
        message.value = 'Hello, Vue 3!'
      }, 2000)
    })
    onUpdated(() =&gt; {
      console.log('DOM updated')
    })
    const handleClick = () =&gt; {
      alert(message.value)
    }
&lt;/script&gt;</code></pre><p>在上面的例子中，我们通过 <code>onUpdated</code> 钩子在每次数据更新后输出 DOM 更新消息。同时，在方法中添加了一个按钮点击事件，用于显示最新的消息。</p><p>需要注意的是，在 Vue 3 中，onBeforeUpdate 和 onUpdated 钩子需要在 setup 函数中使用。</p><h2>五、onBeforeUnmount和onUnmounted</h2><p>当组件不再需要时，Vue3将依次执行beforeUnmount和unmounted钩子函数。beforeUnmount钩子函数在组件卸载之前被调用，通常用于清理一些事件监听器或取消一些异步任务。unmounted钩子函数在组件完全被卸载后被调用，此时，组件可以回收内存等资源。</p><h3>onBeforeUnmount</h3><p><code>onBeforeUnmount</code> 钩子函数会在组件卸载之前运行，可以用来清除定时器、取消事件监听器等操作。</p><pre><code class="language-javascript">&lt;script setup&gt;
import { onBeforeUnmount, ref } from 'vue'
    const timer = ref(null)
    onBeforeUnmount(() =&gt; {
      clearInterval(timer.value)
    })
    const startTimer = () =&gt; {
      timer.value = setInterval(() =&gt; {
        console.log('Hello, world!')
      }, 1000)
    }
    const stopTimer = () =&gt; {
      clearInterval(timer.value)
    }
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;定时器示例&lt;/p&gt;
    &lt;button @click="startTimer"&gt;开始&lt;/button&gt;
    &lt;button @click="stopTimer"&gt;停止&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre><p>在上面的例子中，我们通过 <code>onBeforeUnmount</code> 钩子注册了一个函数，在组件卸载之前清除定时器。同时，在方法中添加了两个按钮事件，用于启动和停止计时器。</p><h3>onUnmounted</h3><p><code>onUnmounted</code> 钩子函数会在组件卸载后运行，通常用于清理一些资源或取消订阅。</p><pre><code class="language-javascript">&lt;template&gt;
  &lt;div&gt;
    &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;button @click="unsubscribe"&gt;取消订阅&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { onMounted, onUnmounted, ref } from 'vue'
    const message = ref('')
    let subscription = null
    onMounted(() =&gt; {
      // 模拟创建一个订阅
      subscription = setInterval(() =&gt; {
        message.value = new Date().toLocaleTimeString()
      }, 1000)
    })
    onUnmounted(() =&gt; {
      // 在组件卸载后取消订阅
      clearInterval(subscription)
    })
    const unsubscribe = () =&gt; {
      clearInterval(subscription)
    }
&lt;/script&gt;</code></pre><p>在上面的例子中，我们通过 <code>onUnmounted</code> 钩子在组件卸载后清除订阅。同时，在方法中添加了一个按钮点击事件，用于取消订阅。</p><p>需要注意的是，在 Vue 3 中，onBeforeUnmount 和 onUnmounted 钩子需要在 setup 函数中使用<em><code>。</code></em></p><h2>六、总结</h2><p>Vue3引入了Composition API、Teleport等新特性，同时也改进了组件生命周期的实现方式，包括钩子函数的命名和顺序的变化。通过了解Vue3中组件生命周期的变化，开发人员可以更好地管理组件的状态、数据以及DOM操作，从而提高Vue3应用程序的性能和可维护性。总之，Vue3中的组件生命周期是一个非常重要的概念。开发人员应该熟悉Vue3的生命周期钩子函数，以便更好地编写和维护Vue3应用程序。</p>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识