Vue中在export default内外定义实例属性的区别是什么？

核心区别 #

• 第一种写法：每次组件实例化调用data函数时，都会生成一个全新的独立对象，每个组件实例的响应式数据相互隔离，完全符合Vue官方设计规范。
• 第二种写法：data对象定义在组件模块的顶层作用域，属于单例共享对象，所有该组件的实例都会引用同一份内存地址的data对象，数据是所有实例全局共享的。

问题解答 #

1. 第一种写法是否更值得推荐使用？ #

是，第一种是Vue官方强制要求的标准写法。Vue组件原生支持复用，只有每次data返回全新对象，才能保证每个组件实例的响应式数据相互独立，不会出现数据互相干扰的问题。

2. 第二种写法是否适合用来定义methods、computed、watch等其他实例属性？ #

完全不适合。
一方面，methods、computed、watch本身属于组件的原生配置选项，直接写在export default的组件配置中即可，不需要额外提到顶层作用域定义。
另一方面，如果将这些配置的内容定义在顶层作用域，会导致所有组件实例共享同一份配置逻辑，如果配置中引用了顶层的可变变量，会出现多实例数据互相污染的问题，同时配置中this的指向也可能出现不符合预期的情况。

3. 使用第二种写法定义属性会带来哪些影响？ #

• 组件复用时出现数据污染：只要任意一个实例修改了data中的属性，所有复用的组件实例的数据都会同步变更，完全不符合组件功能预期，这类问题排查难度很高。
• 不符合Vue官方规范，框架本身的优化逻辑、响应式机制都可能出现异常。
• 服务端渲染（SSR）场景下会出现跨请求数据污染，不同用户的请求会共享同一份data数据，导致用户数据错乱，引发严重的业务问题。

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