Vue 监测数据改变的原理

监测数据改变的原理

代码主要功能：点击按钮，更新第一条数据

    <div id="root">            
        <button @click="updata">更新周冬雨的信息</button>
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
    </div>

var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001", name:"周冬雨", age:19},
                    {id:"002", name:"周杰伦", age:30},
                    {id:"003", name:"夏雨", age:2},
                    {id:"004", name:"温兆伦", age:22}
                ]
            },
            methods: {
                updata(){
                    this.persons[0].name = "周老师"
                    this.persons[0].age = 40
                }
            }
        })

分批对一个对象的属性进行修改，这样产生的效果是对的，但是我们修改一整条数据（对象），并没有产生我们预想中的效果

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001", name:"周冬雨", age:19},
                    {id:"002", name:"周杰伦", age:30},
                    {id:"003", name:"夏雨", age:2},
                    {id:"004", name:"温兆伦", age:22}
                ]
            },
            methods: {
                updata(){
                    this.persons[0] = {id:"001", name:"周老师", age:40}
                }
            }
        })

网页中的数据没有发生改变，但是在控制台输出的结果却是改变了

解释Vue监测对象中的数据的原理

在Vue的设计中对对象的数据进行了一个递归，查找对象中的每一个属性，并且对其进行数据代理，给每一个属性设有get和set方法，这样子当对象中的数据发生改变，那么Vue就会察觉并修改页面中的数据

如需给后添加的属性做响应式，请使用如下API:

vm为Vue对象

Vue.set(target, propertyName/index, value)
或
vm.$set(target, propertyName/index, value)

解释Vue监测数组中的数据的原理

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

1. 调整原生对应的方法对数组进行更新
2. 重新解构模型，进而更新页面

在修改数组的时候，我们只有通过数组的修改方法才能，修改方法有push、pop、shift、unshift、splice、sort、reverse

注意：Vue.set()和vm.set() 不能给vm或者vm的根数据对象添加属性