Vue 中如何实现有状态组件与无状态组件

在 Vue 开发中，理解和正确实现有状态组件与无状态组件对于构建高效、可维护的应用至关重要。

有状态组件，简单来说，就是那些拥有自己内部状态（data）并且状态会随时间变化而改变的组件。例如一个待办事项列表组件，用户添加、删除或标记事项完成等操作都会影响组件的状态。要创建一个有状态组件，首先在 Vue 组件定义中使用 data 选项。data 必须是一个函数，返回一个包含组件初始状态的对象。

export default {
  data() {
    return {
      tasks: [],
      newTask: ''
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim()!== '') {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    }
  }
}

在模板中，通过双向数据绑定来展示和修改状态：

<template>
  <div>
    <input v-model="newTask" placeholder="添加新任务">
    <button @click="addTask">添加</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
    </ul>
  </div>
</template>

无状态组件则相反，它们没有自己的内部状态，只负责根据传入的 props 来渲染 UI。无状态组件的优点在于简单、易测试、可复用性高。以一个显示用户信息的组件为例：

export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  }
}

模板部分如下：

<template>
  <div>
    <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
  </div>
</template>

使用时，在父组件中传入相应的 props：

<template>
  <div>
    <UserInfo :user="currentUser" />
  </div>
</template>
<script>
import UserInfo from './UserInfo.vue';
export default {
  components: {
    UserInfo
  },
  data() {
    return {
      currentUser: {
        name: '张三',
        age: 25
      }
    }
  }
}
</script>

在实际项目中，应根据组件的职责合理划分有状态与无状态组件。将复杂的状态管理集中在有状态组件，无状态组件专注于 UI 展示，这样能使代码结构更清晰，提升开发效率和应用性能。