Vue (6) — Vue监视数据的原理、收集表单的数据

目录

一、Vue监视数据的原理

   1.Vue监视数据范围

   2.如何监测对象中的数据

   3.如何监测数组中的数据

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

   5.案例展示

二、收集表单数据

---

一、Vue监视数据的原理

   1.Vue监视数据范围

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

data:{
            student:{
                name:'Tom',
                age:11,
                hobby:['吃饭','睡觉','打游戏'],
                friends:[
                    {name:'Jerry',age:22},
                    {name:'Tong',age:11}
                ]
            }    
        },

 

 

   2.如何监测对象中的数据

            通过setter实现监视，且要在new Vue时就传入要监测的数据

              （1）对象中后追加的属性，Vue默认不做响应式处理

              （2）如需给后添加的属性做响应式，请使用如下API：

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

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

   3.如何监测数组中的数据

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

              （1）调用原生对应的方法对数组进行更新

              （2）重新解析模板，进而更新页面

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

            1.使用这些API：（以下表格中的API都会修改原数组）

push()	将一个或多个元素添加到数组的末尾
shift()	从数组中删除第一个元素
unshift()	将一个或多个元素添加到数组的开头
splice()	通过删除或替换现有元素或者原地添加新的元素来修改数组
sort()	对数组的元素