Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

问题描述

为什么在vue组件中，我们的data属性必须是一个函数,new Vue()中的data除外，因为new Vue中只有一个data属性。

原因

因为我们能抽离出来的组件，肯定是具有复用性的，它在项目中会存在多个实例。如果data属性值是一个对象时，那么它所有的实例都会共享这些数据，这是很麻烦的事情，你不能确保你的所有实例中的属性值都不会重复。

我们的期望是，组件的每个实例都能独立的维护自己的数据。

解决方案

我们都知道，在JavaScript中，函数具有独立作用域快的特点，外部是无法访问其内部的变量。

试想一下，如果我们组件中的data属性是一个函数，他的每个实例就会有自己的作用域空间，也就是独立的数据，每个实例之间不会相互影响。

所以，组件中的data属性必须是一个函数。

项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路径引入，这种方式比较笨，可以使用webpack的路径别名alias设置来解决。

参考：https://www.jianshu.com/p/5faaa38774cf