Vue中必须在data选项中预定义数据吗？还是仅为开发约定

你看到的教程里统一把状态写在data返回值里的写法，不是无意义的约定，也不是完全强制的语法要求，但属于所有生产级Vue项目都应该遵守的实践，你觉得直接给this挂新属性效果没区别，只是没碰到隐性坑而已。

Options API下的标准状态定义写法如下：

app = createApp({
    data() {
        return {
            someData: null,
        }
    },
})

不同Vue版本的底层差异 #

• Vue 2 场景：提前在data里声明属性是强制的响应式要求。Vue2用Object.defineProperty做响应式代理，只能代理实例初始化时就已经存在的属性，如果你后续在mounted、methods里直接通过this.someData2 = xxx加新属性，这个属性只是普通的JS对象属性，完全不具备响应式能力：修改它的值不会触发模板更新，也无法被watch监听，只是刚好能通过this读到值而已，很多新手都踩过这个坑。
• Vue 3 场景：因为底层换成了Proxy代理整个组件实例，后续动态挂载到this上的属性确实会被自动处理为响应式，基础的读值、改值、模板渲染看起来和提前在data里声明的效果一致，这也是你觉得"没区别"的核心原因。

就算是Vue3，也不推荐动态往this上挂状态 #

哪怕Vue3从技术上支持动态加响应式属性，这种写法依然有很多无法忽视的问题：

• 可维护性极差：所有组件状态散落在各个生命周期、方法里，其他人接手代码时，没法通过data或者setup快速掌握组件全量状态，要翻遍所有逻辑才能找到某个属性是在哪里定义的，排查问题的成本极高。
• 存在命名冲突风险：动态挂载的属性如果和Vue实例内置属性、mixin/全局插件挂载的属性重名，会直接覆盖原有值，这类问题非常隐蔽，排查起来耗时极长。
• 类型支持完全失效：如果使用TypeScript开发，动态挂载的属性不会有任何类型推导，写代码时没有自动补全，很容易因为拼错属性名触发低级bug。
• 容易触发时序问题：如果属性是在某个异步逻辑、甚至特定交互后才被挂载到this上，模板首次渲染时读这个属性会直接触发undefined报错，提前在data里声明并初始化默认值（比如null、空数组、初始字符串），可以从根源上避免这类问题。
• SSR水合异常：在服务端渲染场景下，动态挂载的属性很容易出现服务端渲染输出和客户端初始状态不一致的问题，触发水合失败报错。

如果你确实需要存不需要响应式的临时值，不要直接挂在this上，可以用组件作用域内的普通常量/变量存储，或者挂载到this.$options上，避免污染组件的响应式状态树。

内容的提问来源于stack exchange，提问作者Kyung Neung Lee