VUE忏悔学习3-Vue选项: data数据以及数据响应式

1、初步了解数据属性Data

VUE的数据是写在vue选项对象(也可以理解为配置对象)的data属性中的，我们可以通过Mustache(双大括号语法)将数据插入到页面上，如下图所示。

2、数据响应式变化

当一个 Vue 实例被创建时，通过插值语法将数据显示在页面上。当我们修改data中数据时，页面也会跟着发生变化。

原因 ：在Vue实例化时，会向Vue的响应式系统中加入data对象中所有能够找到的属性，然后通过get()和set()的方法监听数据的变化，一旦数据改变，视图也跟着变化。值得注意的是，只有data中存在的属性才是响应的，新添加的属性不具有响应性。

为了解决这种问题，我们不妨预测一下之后会用到的属性，在data中先定义出来，给它一个空值，好将它也加入到监听系统中，比如这样：

但是这个方法有一个特例，当data对象使用了Object.freeze()的冻结方法，就会使Vue实例的所有data属性中的数据都失去了响应式，这个方法有时候可以用来冻结data中的部分数据。

3、当data数据是对象时，是否也有上述情况？

当我们想将不是响应系统检测的数据添加到响应系统，可以用$set()方法。

缺点是当要改变多个数据时，要多次调用$set()方法，要累死个人，这时候我们不妨直接替换student对象中的内容，在里面添加自己要加入到响应系统中的属性。

以上方法也有缺点，要重复书写对象中已有的属性，解决这个问题可以用Object.assign()方法。

4、当数据是数组呢？

监听系统不会像对象那样监听数组中每一项的变化，所以通过下标索引改变数组的值不会触发响应式，监听系统只会监听整个数组的变化，所以要全新的数组（替换原数组）才能触发响应式。

数组的变异方法：

push()       向数组的末尾添加一个或多个元素,并返回新的长度

pop()         删除数组的最后一个元素并返回删除的元素

shift()        把数组的第一个元素删除，并返回删除的元素

unshift()    向数组的开头添加一个或更多元素，并返回新的长度

splice()      向/从数组中添加/删除项目，然后返回被删除的项目（位置，数量，新项目）

sort()         排序

reverse()   倒序

数组的非变异方法：

filter()        返回筛选后的数组

concat()    返回连接后的数组

slice()        返回选定的元素（start，no-end）

Ps：非变异方法不会改变原始数组，但总是返回一个新数组，指定原数组等于非变异方法改变后的数组也可以起到变异方法的效果。