探讨Vue 数据监测原理-第二节-问题引入：Vue 更新数据对象不奏效问题

本文链接：https://blog.csdn.net/pymxb1991/article/details/125701752

文章目录

探讨一下Vue 数据监测的原理

探讨一下Vue 数据监测的原理

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue 教程 https://cn.vuejs.org/v2/guide/
MDN Web Docs 社区 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

本次探讨的第二个章节

第二节：问题引入：Vue 更新数据对象不奏效问题

工欲善其事，必先利其器
演示需要 VueTools 工具
点此连接直接下载

案例
1.1 基础页面1.2 案例效果
需求
2.1 数据更新的两种方式

1 案例

1.1 基础页面

<body>
	    <div id="root">
	        <h1>你好,{{name}}</h1><hr/>
	        <h2>人员列表排序</h2>
	        <ul>
	            <li v-for="(person, index) in persons" :key="person.id">
	                {{person.name}}  - {{person.sex}} - {{person.age}}
	            </li>
	        </ul>
	    </div>
	    <script type="text/javascript">
	        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
	        const vm = new Vue({
	            el: "#root",
	            data: {
	                name: "安锐捷",
	                persons:[
	                    {id:"001",name:"马冬梅",age:"18",sex:'女'},
	                    {id:"002",name:"周冬雨",age:"19",sex:'女'},
	                    {id:"004",name:"温兆伦",age:"22",sex:'男'},
	                    {id:"003",name:"周杰伦",age:"20",sex:'男'},
	                ],
	            },
	            methods: {
	            },
	        })
	  </script>
</body>

1.2 案例页面效果图例

在这里插入图片描述

2. 需求

点击按钮，更新信息更新页面中persons 中，马冬梅的信息，修改为{name:‘马老师’,age:50,sex:‘男’}

2.1 数据更新的两种方式

注意：要求使用两种方式更新 (1)、使用索引下标，(2)、对象形式
- 页面中添加按钮
- <button @click="updateMei">更新马冬梅</button>
- methods 中添加相应updateMei方法
  - (1)、使用索引下标更新信息
```
  updateMei(){
       this.persons[0].name = "马老师"; 
       this.persons[0].age = "50";  
       this.persons[0].sex = "男";  
  } 
```
    展示页面，点击更新按钮，效果如下 点击按钮，成功的更新了信息
  - (2)、使用对象更新信息：当点击按钮的时候直接把索引0的对象直接替换
```
    updateMei(){
        this.persons[0] =  {id:"001",name:"马老师",age:"50",sex:'男'};
    }
```
    点击更新之前，我们先打开Vue的开发者工具，方便观察页面现象，效果如下
    点击按钮，更新信息 发现数据没有更新，观察开发者工具也没有修改，证明开发者工具也没有承认这次修改
    
    这里还有一个小问题，如下
    我们重新打开页面，先打开F12,再点击更新按钮，最后打开开发者工具，观察效果
    
    通过工具查看，persons中数据已经修改，这是为什么呢？？？
    当我们点击按钮的时候，这块可以明确的是内存中的数据确实已经变化，
    我们使用vm 实例来观察，到底persons 数据有没有被修改
    观察发现，数据已经被修改了，但是页面没有渲染出来，
    这到底是为什么呢？？？
    ？？？
    这是因为Vue 并没有监测到 persons中的信息有变化，这块就需要明白Vue数据监测的原理了！！
    
    后续的几个章节会把数据监测原理直接说明白