Vue.js 的data详解

本文从Vue.js的官方文档来逐行分析看看Vue.js的数据对象——data

官方文档地址

文档之一：

• 类型：Object | Function
• 限制：组件的定义只接受 function

分析一：

首先，data的类型可以是Object

new Vue({
	el:"#app",
	data:{
		newTodoText : "",
		visitCount: 0,
		hideCompletedTodos: false,
		todos: [],
		errror: null
	}
})

其次，组件（component）里的定义的data必须是方法类型的，至于为什么接下来会介绍到：

Vue.component("myComponent",{
	props: [],
	data:function(){
		return {
			newTodoText: "",
			visitCount: 0,
			hideCompleteTodos: false,
			todos: [],
			error: null
		}
	}
})

文档之二：

• 详细：
  1、Vue实例的数据对象，Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象（含有零个或多个的key/value对）：浏览器API创建的原生对象，原型上的属性会被忽略。大概来说，data应该只能是数据，不推荐观察拥有状态行为的对象。
  2、一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。

分析二：

在上图的实例中，app的data对象中有五个属性，分别是：

<code>newTodoText，visitCount，hideCompletedTodos，todos，error</code>

Vue会把这五个属性转化为getter和setter来控制访问对象app属性，以第一个属性newTodoText为例设置了getter和setter：

const Vue = { 
	_newTodoText: "",
	get newTodoText(){
		return this._newTodoText;
	}.
	set newTodoText(value){
		this._newTodoText = vlaue;
	}
}

文档之三：

实例创建之后，可以通过vm.$data访问原始数据对象。Vue实例也代理了data对象上所有的属性，因此访问vm.a等价于访问vm.$data.a。

以 _ 或 $ 开头的属性 不会 被 Vue实例代理，因为它们可能和Vue内置的属性、API方法冲突。你可以使用例如vm.$data._property的方式访问这些属性。

属性三：

这个好理解，就是你可以在data中可以定义属性时在属性名开头加上下划线"_"或者"$"符，就不可以直接访问。

示例一：（此时会报错，直接使用{_first}访问不到data中以_开头的数据）

<div id="app">
	{first}
	{_first}
</div>
<script>
	new Vue({
		el: "#app",
		data:{
			first: 'ok',
			_first: 'nope'
		}
	})
</script>

示例二：这里使用{$data._first}就可以正常的访问了

<div id="app">
	{first}
	{$data._first}
</div>
<script>
	new Vue({
		el: "#app",
		data:{
			first: 'ok',
			_first: 'nope'
		}
	})
</script>

文档之四：

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

分析四：
这就是分析一下要解决的问题了，为什么组件（component）里定义的data必须是方法类型，原因就在此，在工程中，每个组件都有可能创建多个实例，而这个组件的实例它们的属性是不能共用的，意思是组件A的属性改变不应该引起组件B的同一属性改变，要不然就乱套了，所以要使用函数实现每个实例的数据都具有单一性（不是共享的）。

有关组件中只data接受函数的例子：https://blog.csdn.net/weixin_44296929/article/details/103576930