如何在Vue 3中使用setup函数？

最新推荐文章于 2025-04-09 15:07:05 发布

JJCTO袁龙

最新推荐文章于 2025-04-09 15:07:05 发布

阅读量1.5k

点赞数 41

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yuanlong12178/article/details/144965971

版权

Vue 专栏收录该内容

714 篇文章

订阅专栏

如何在Vue 3中使用setup函数？

随着Vue 3的发布，Vue.js的功能和性能得到了显著提升。其中，setup函数是Vue 3引入的一项主要特性，它使得组件的逻辑组织方式更加灵活，增强了组合式API的使用体验。在本文中，我们将深入探讨setup函数的用法，并通过示例代码演示它的强大功能。

什么是setup函数？

在Vue 3中，setup函数是一个新的组件选项。它在组件实例被创建之前被调用，允许你在这里进行状态的定义、计算属性的创建、方法的定义以及引入其他组合式API。setup函数可以接受两个参数：props和context。

props：传递给组件的属性。
context：一个包含属性（attrs）、插槽（slots）和引用（emit）的方法的上下文对象。

setup函数的返回值将用于组件的模板中和其他地方，通常返回的是一个对象。

基本用法示例

让我们先看一个简单的setup函数的示例。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">点击增加</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const title = '欢迎使用 Vue 3';
    const count = ref(0); // 使用 ref 创建响应式数据

    const increment = () => {
      count.value++; // 注意要使用 .value 访问 ref 的值
    };

    return {
      title,
      count,
      increment,
    };
  },
};
</script>

在这个例子中，我们在setup函数中定义了一个title属性和一个响应式的count状态。我们还创建了一个increment函数来增加计数。在返回的对象中，我们将这些状态和方法暴露给模板中使用。

响应式数据与计算属性

在Vue 3中，setup函数可以很好地与响应式API结合使用。我们可以使用ref和computed来创建响应式数据和计算属性。

示例代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>姓名: <input v-model="name" /></p>
    <p>你好, {{ fullName }}!</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const title = '用户信息';
    const name = ref(''); // 用 ref 创建响应式数据

    const fullName = computed(() => {
      return name.value ? `Mr. ${name.value}` : '未知用户';
    });

    return {
      title,
      name,
      fullName,
    };
  },
};
</script>

在这个例子中，我们增加了一个输入框来获取用户的名字。使用computed创建了一个fullName属性，它会根据name的值自动更新。当用户在输入框中输入内容时，界面会自动显示问候消息。

处理副作用

在setup函数中，我们还可以使用onMounted和其他生命周期钩子来处理副作用。

示例代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>当前时间: {{ currentTime }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const title = '当前时间';
    const currentTime = ref('');

    onMounted(() => {
      currentTime.value = new Date().toLocaleTimeString();
      setInterval(() => {
        currentTime.value = new Date().toLocaleTimeString();
      }, 1000);
    });

    return {
      title,
      currentTime,
    };
  },
};
</script>

在这个示例中，我们使用onMounted生命周期钩子来初始化currentTime。当组件被挂载时，我们使用定时器每秒更新当前时间。

组合与复用功能

组合函数是setup函数的另一个关键特性。通过编写组合函数，我们可以将逻辑提取到独立的函数中，从而实现代码的重用。

示例代码

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment,
  };
}

然后在组件中使用这个组合函数：

<template>
  <div>
    <h1>计数器</h1>
    <button @click="increment">增加</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment,
    };
  },
};
</script>

在这个示例中，我们将计数器逻辑封装在useCounter组合函数中，然后在组件中直接使用它。这种方式使得组件的逻辑更加清晰和模块化。

综合示例：一个简单的Todo应用

让我们将所有内容结合，构建一个简单的Todo应用。

示例代码

<template>
  <div>
    <h1>我的Todo列表</h1>
    <input v-model="newTodo" placeholder="添加新的Todo" @keyup.enter="addTodo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todos.value.push({ id: Date.now(), text: newTodo.value });
        newTodo.value = '';
      }
    };

    const removeTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id);
    };

    return {
      newTodo,
      todos,
      addTodo,
      removeTodo,
    };
  },
};
</script>