介绍
在 Vue 中，data的定义方式有两种，一种是在 Vue 根实例中 data 是一个对象，还是一种就是在 Vue 组件中 data 是一个函数。
实例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="v of list">{{ v }}</li>
</ul>
</div>
</body>
<script>
Vue.component('item', {
data() {
return {}
}
})
var vm = new Vue({
el: "#app",
data: { // 直接定义
list: [
1, 2, 3
]
}
})
</script>
</html>区别
在简单的 Vue 实例应用中，这两种写法是几乎是没有什么区别的，因为上述定义的 #app 对象不会被复用。
但是在组件环境中，会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个 data 对象，因此通过提供 data 函数的方式，在每次创建一个新实例后，我们能够调用 data 函数返回一个全新的数据对象。
所以这里一定要是注意，在一个组件内定义的 data 必须是一个返回初始数据对象的函数。例如：
<script>
export default {
data () {
return {}
}
}
</script>