Vue - 监测数据的原理、Vue.set、vm.$set

监测数据的原理

目录

监测数据的原理

一、更新时的问题

二、Vue检测对象

三、Vue检测数组

3.1 push 添加

3.2 shift 删除

3.3 splice 替换

3.4 原理

四、Vue.set

4.1 追加属性

4.2 案例

五、总结

5.1 代码练习

5.2 总结

---

一、更新时的问题

为什么我们要研究一下Vue监测数据的原理？

以防我们后续在给data赋值或者修改data中数据时导致修改不成功

比如下面这个例子：

    
        
        
        
         
    
    
        

            
人员列表
       <button @click="updateMei">更改马冬梅信息</button>
        <ul>
            <li v-for="(p,index) in  persons" :key="p.id" >
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip=false
        
      const vm=  new Vue({
            el:'#root',
            data:{

              persons:[
                {id:'001',name:'马冬梅',age:19,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:21,sex:'男'},
                {id:'004',name:'温兆伦',age:22,sex:'男'}
              ],
             
            },
            methods: {
                updateMei(){
                    this.persons[0].name = '马老师'
                    this.persons[0].age = 50,
                    this.persons[0].sex = '男'
                }
            },
        })

    </script>   
</body>

当我们点击按钮之后，马冬梅的信息会随之改变

我们不难发现：页面中的内容修改了，Vue中的数据也修改了

  methods: {
                    updateMei(){
                        //this.persons[0].name = '马老师'
                        //this.persons[0].age = 50,
                        //this.persons[0].sex = '男'
                         this.persons[0] ={id:'001',name:'马老师',age:50,sex:'男'}
                    }
                },

初始界面和上面还是相同的，但是我们<