Vue3通透教程生命周期函数

作者：System 时间：2024年08月15日分类：所有,javascript 字数：676

这篇文章距离上次修改已过445天，其中的内容可能已经有所变动。

在Vue 3中，生命周期钩子被重命名并且分成了不同的阶段。以下是Vue 3中生命周期函数的一个简单示例：




<template>
  <div>{{ message }}</div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, Vue 3!');
 
    // 挂载时的操作
    onMounted(() => {
      console.log('组件已挂载');
      // 在这里可以进行DOM操作或者设置定时器等
    });
 
    // 卸载时的操作
    onUnmounted(() => {
      console.log('组件已卸载');
      // 在这里可以清除定时器或者取消订阅等
    });
 
    // 返回响应式数据以供模板使用
    return {
      message
    };
  }
};
</script>

在这个例子中，setup 函数是一个新的组件选项，用于组织组件的逻辑。onMounted 和 onUnmounted 是两个新的生命周期函数，分别在组件挂载和卸载时被调用。这种组织组件逻辑的方式是Vue 3的一个显著特点。

Vue3通透教程生命周期函数

评论已关闭

推荐阅读