前端技术分享
0%

【022】Vue选项：数据中的 data

发表于 更新于 分类于

使用

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

模版代码：

1
2
3
4
5
data() {
	return {
		title: 'Hello World'
	}
}

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{ title }}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data() {
					return {
						title: 'Hello World'
					}
				}
			})
		</script>
	</body>
</html>

是不是很熟悉？其实在开发过程中，data的使用是不可或缺的，我们以前写的那些例子，基本都是有用到的。

注意

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果有需要深究的小伙伴，可以返回vue基础学习：组件基础（一）中的data 必须是一个函数进行了解，里面有两个详细的示例代码进行解释，在这里就不再详解。