Vue.js中定义抽象数据模型的正确方式及跨组件引用方法

这是Vue开发里很常见的选择疑问，两种定义方式各有明确的适用场景，我来帮你拆解清楚：

一、两种定义方式的差异与适用场景 #

1. 以Vue组件（Person.vue）的Props定义 #

这种方式是把数据模型和UI组件绑定在一起，适合这个模型本身就是用来承载UI渲染数据的场景——比如你需要一个专门展示用户信息的组件。

Props是Vue组件的标准输入，自带类型校验能力，而且天然继承Vue的响应式特性，父组件传递数据后，子组件能自动响应变化：

<!-- Person.vue -->
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  }
}
</script>

使用方式：作为UI组件在父组件中引入并传递数据：

<!-- 父组件示例 -->
<template>
  <Person :first-name="currentUser.firstName" :last-name="currentUser.lastName" />
</template>

<script>
import Person from './Person.vue';

export default {
  components: { Person },
  data() {
    return {
      currentUser: {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
}
</script>

2. 以独立Class类（Person.js）定义 #

这种方式是纯数据模型，完全和UI逻辑解耦，适合需要在多个组件、甚至非UI业务逻辑（比如API数据转换、工具函数）中复用这个数据结构的场景，还能给模型添加专属的业务方法（比如格式化全名）。

注意：原生Class实例的属性默认不是Vue响应式的，需要结合Vue的响应式API处理：

// Person.js
class Person {
  constructor(firstName = '', lastName = '') {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // 给模型添加业务方法
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
export default Person;

正确使用方式：在组件中实例化Class，而非直接引用类本身：

<script>
import Person from './Person';

export default {
  data() {
    return {
      // 正确：实例化一个Person对象
      userA: new Person('Jane', 'Smith'),
      // 错误：这里只是保存了类的引用，不是具体的数据实例
      // userB: Person,
    }
  },
  methods: {
    showFullName() {
      console.log(this.userA.getFullName()); // 输出 "Jane Smith"
    }
  }
}
</script>

如果需要让Class实例的属性具备响应式：

• Vue 2：直接把实例放到data中即可，Vue会递归处理其属性
• Vue 3：在setup中用reactive包裹实例：

import { reactive } from 'vue';
import Person from './Person';

export default {
  setup() {
    const user = reactive(new Person('Alice', 'Brown'));
    return { user };
  }
}

二、如何选择？ #

• 若这个模型仅用于UI组件的渲染输入，选Person.vue的Props方式，更贴合Vue组件化的设计逻辑，无需额外处理响应式。
• 若这个模型需要跨场景复用，或需要封装业务方法，选独立Class类的方式，保持数据逻辑和UI逻辑的分离，代码更易维护。

内容的提问来源于stack exchange，提问作者AMahdy