Vue3开发实例代码详细剖析

在前端开发领域，Vue3以其高效、灵活等优势备受青睐。下面通过一个简单的待办事项列表实例，深入剖析Vue3的开发过程。

首先是项目的初始化。使用Vue CLI快速搭建Vue3项目：vue create vue3-todo-app，选择合适的预设后，项目便创建完成。

进入项目目录，在src文件夹下，核心的App.vue文件结构如下：

<template>
  <div id="app">
    <input v-model="newTodo" placeholder="添加新任务">
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
  </div>
</template>

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

const newTodo = ref('');
const todos = ref([]);

const addTodo = () => {
  if (newTodo.value.trim()!== '') {
    todos.value.push(newTodo.value);
    newTodo.value = '';
  }
};
</script>

在这段代码中，<template>部分定义了页面的DOM结构。v-model指令将输入框的值绑定到newTodo响应式变量上，实现双向数据绑定。@click指令监听按钮的点击事件，触发addTodo方法。v-for指令用于循环渲染待办事项列表，每个列表项都有唯一的key。

<script setup>是Vue3新增的语法糖。import { ref } from 'vue';引入了ref函数，用于创建响应式数据。newTodo和todos就是通过ref创建的响应式变量，分别存储新任务输入值和待办事项列表。

addTodo方法是核心逻辑。它首先检查newTodo的值是否为空，不为空则将其添加到todos数组中，并清空newTodo的值。

样式部分，在<style scoped>中编写：

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

scoped属性确保样式只作用于当前组件。

通过这个简单的实例可以看到，Vue3的响应式原理、组件化开发以及新的语法糖让代码更加简洁、易读和维护。开发者能够快速搭建功能模块，提升开发效率。随着项目规模的扩大，Vue3的生态系统和强大功能将进一步发挥优势，助力打造更复杂、高效的前端应用。