Vue 基础面试题, 为什么 Vue 中的 data 属性是一个函数而不是一个对象?

Step 1

Q:: 为什么 Vue 中的 data 属性是一个函数而不是一个对象？

A:: 在 Vue 中，如果一个组件的 data 属性是一个对象，那么它会在所有的组件实例之间共享这一对象的引用，这将导致多个组件实例共享同一个数据源，可能会引发数据污染和意外的状态变化。而将 data 定义为一个返回对象的函数，每次创建组件实例时都会返回一个新的对象实例，从而确保每个组件实例都有独立的状态，避免了数据共享带来的问题。

Step 2

Q:: Vue 中的 data 属性为什么不直接写成一个普通的对象？

A:: 如果 data 直接写成一个对象，则所有实例将共享同一个数据对象，这在大多数情况下是不期望的行为。将 data 定义为一个函数，每次创建一个新的组件实例时，该函数会返回一个新的数据对象，这样就能确保每个实例都有独立的数据对象，避免数据被污染。

Step 3

Q:: 如何在 Vue 组件中定义数据的默认值？

A:: 可以在组件的 data 函数中定义数据的默认值。例如：

 
 data() {
  return {
    message: 'Hello World'
  }
}
 

这样，每个组件实例都会有一个独立的 message 属性，初始值为 'Hello World'。