Vue监测数据改变的原理

Vue监视数据的原理：

1.vue会监视data中所有层次的数据

2.如何监测对象中的数据？（通过setter实现监视，且要在new Vue时就传入要监测的数据）

• 对象中后追加的属性，Vue默认不做响应式处理
• 如需给后添加的属性做响应式，请使用如下API：
• Vue.set(target,propertyName/index,value)
• vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据？（通过包裹数组更新元素的方法实现，本质就是做了两件事：）

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

4.在Vue修改数组中的某个元素一定要用如下方法：

• 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等） 添加属性

先引出一个问题，可以更新人员信息的代码示例：（奏效）
点击按钮更新人员信息

    
    
    



    
人员列表
    更新马冬梅的信息
    

        

            {{p.name}} - {{p.age}} - {{p.sex}}
        
    

点击按钮更新不了的代码示例：（不奏效）

这个实实在在的是把数据改了，只不过，vue没有监测到

    
    
    



    
人员列表
    更新马冬梅的信息
    

        

            {{p.name}} - {{p.age}} - {{p.sex}}
        
    

打开控制台看一下：

现在模拟一个数据监测：

Vue数据监视：

    
    
    
    



    
学生信息
    年龄+1岁
    

    添加性别属性，默认值男
    

    在列表首位添加一个朋友
    

    修改第一个朋友的名字为：张三
    

    添加一个爱好
    

    修改第一个爱好为：开车
    

    过滤掉爱好中的抽烟
    

    
姓名：{{student.name}}
    
年龄：{{student.age}}
    
性别：{{student.sex}}
    
爱好
    

        

            {{h}}
        
    
    
朋友们
    

        

            {{f.name}} -- {{f.age}}