Vue学习（三）数据监视

ゝ一世哀愁。 2022-09-09 13:46 151阅读 0赞

### 文章目录 ###

*  一、Vue更新数据存在的问题
 *  二、Vue监测数据改变的原理
 *  三、Vue 数据监视总结

# 一、Vue更新数据存在的问题 #

示例代码如下：

<div id="app">
    	<h2>人员信息</h2>
    	<button @click="update">点击更新Robert人员信息</button>
    	<ul>
    		<li v-for="(p,index) of perArr" :key="p.id">
    			{
       {p}}
    		</li>
    	</ul>
    </div>
    <script type="text/javascript"> const vm = new Vue({ el: '#app', data: { perArr: [{ id: '001', name: 'Robert', age: 19}, { id: '002',name: 'Rose', age: 18}, { id: '003', name: 'Jack', age: 20}] }, methods:{ update(){ //方式一：更换数组元素，有效 this.perArr[0].name ='Robin' this.perArr[0].age =20 //方式二：替换数组数据 // this.perArr[0] ={id: '001', name: 'Robin', age: 20} } } }) </script>

效果如下：  
![在这里插入图片描述][190cc89be12f4d17ac225c09b333da12.gif_pic_center]  
我们通过替换数组元素的方式能够成功修改人员数据，页面也能够成功显示最新数据；而通过修改数组数据我们可以发现页面无法正常显示最新数据，在`Vue`工具中也无法看到最新的数据，而我们在控制台中打印`vm`对象数据可以看到最新的数据，这是什么原因呢？

点开`vm`对象的详细数据，我们可以发现第一个数据数据中数据代理生成的`get`、`set`方法被破坏了，导致页面无法响应式的显示。  
![在这里插入图片描述][945f2155d80e42a2855a3e4101d33b47.png]

# 二、Vue监测数据改变的原理 #

示例代码如下：

<body>
    	<div id="app">
    		<button @click="addSex">添加属性</button>
    		<ul>
    			<li v-for="(friend,index) of student.friends" :key="index">
    				{
       {friend}}
    			</li>
    		</ul>
    	</div>
    </body>
    
    <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#app', data:{ name:'Peking', address:'北京', student:{ name:'tom', parents:{ father:40, mom:39, }, friends:[ 'Jerry','Able','Apple' ] } }, methods:{ addSex(){ // this.student.sex='男' Vue.set(this.student,'sex','男') } } }) </script>

**① 对象**

通过打印`vm`对象我们可以看到`Vue`给`vm`中的对象属性中的属性添加了多个`get`、`set`代理方法。![在这里插入图片描述][bee809e7d0c841eab9ebefabe7cc43fe.png]  
**② 数组**

通过观察数组的代理方法我们可以看到`Vue`并没有给数组里的每个元素都添加代理方法，所以说当我们只是修改数组中的某个元素时，页面不会有响应式的变化，需要使用`Vue`包裹过的方法才会触发视图更新。这些被包裹过的方法包括：`push()`、`pop()`、`shift()`、`unshift()`、`splice()`、`sort()`、`reverse()`。

![在这里插入图片描述][e2c5d63a684240379f76bd90fc762d74.png]  
![在这里插入图片描述][a254baa9ea1a412993f9810169c278a4.gif_pic_center]

![在这里插入图片描述][9708930cb49f453ab2fd76e9b53bb6c8.gif_pic_center]

# 三、Vue 数据监视总结 #

**① `Vue`会监视`data`中所有层次的数据**

**② 如何监测对象中的数据？**

通过`setter`实现监视，且要在`new Vue`时就传入要监测的数据，对象中后追加的属性，`Vue`默认不做响应式处理，如需给后添加的属性做响应式，请使用如下`API`：

*  `Vue.set(target，propertyName/index，value)`
 *  `vm.$set(target，propertyName/index，value)`

**③ 如何监测数组中的数据？**

通过包裹数组更新元素的方法实现，本质就是做了两件事：

*  调用原生对应的方法对数组进行更新
 *  重新解析模板，进而更新页面

在Vue修改数组中的某个元素一定要用如下方法：`push()`、`pop()`、`shift()`、`unshift()`、`splice()`、`sort()`、`reverse()`

**④ 特别注意：`Vue.set()`和`vm.$set()`不能给`vm`或`vm`的根数据对象添加属性！！！**

[190cc89be12f4d17ac225c09b333da12.gif_pic_center]: /images/20220829/38eb257df3ee49abae5acb0052e4d28f.png
[945f2155d80e42a2855a3e4101d33b47.png]: /images/20220829/5727b6d6c37e4ed8924ac254b30b8d92.png
[bee809e7d0c841eab9ebefabe7cc43fe.png]: /images/20220829/025499c0181c42f9bea232e34a682536.png
[e2c5d63a684240379f76bd90fc762d74.png]: /images/20220829/8c554c7ca24146f8a3c7a71c9dcb538c.png
[a254baa9ea1a412993f9810169c278a4.gif_pic_center]: /images/20220829/88b282a5aa8b419a8f9f4ce91ea5858f.png
[9708930cb49f453ab2fd76e9b53bb6c8.gif_pic_center]: /images/20220829/7752d88db1464bc3bf1c998053e86400.png