在 React 中，使用 setState({a:1}) 改变 a 的值

    在微信小程序中，使用 setData({a:1}) 改变 a 值

    在 Vue 中，使用 this.a=1 改变 a 的值

    在 uniapp 中，因为底层使用的是 Vue，写法上当然是和 Vue 相同了，但使用者常常更习惯用微信小程序的写法—— setDate，于是就有了“让 Vue 支持 setData 写法”
    网上特别流行的一个函数如下，现在就来看一看它的原理是什么

    1. function setData(obj){
    2.     let that = this;
    3.     let keys = [];
    4.     let val,data;
    5.     Object.keys(obj).forEach(function(key){
    6.         keys = key.split('.');
    7.         val = obj[key];
    8.         data = that.$data;
    9.         keys.forEach(function(key2,index){
    10.             if(index+1 == keys.length){
    11.                 that.$set(data,key2,val);
    12.             }else{
    13.                 if(!data[key2]){
    14.                     that.$set(data,key2,{});
    15.                 }
    16.             }
    17.             data = data[key2];
    18.         })
    19.     });
    20. }
    1. function setData(obj){
    2.     let that = this;
    3.     let keys = [];
    4.     let val,data
    5.     // 遍历一遍 obj
    6.     Object.keys(obj).forEach(function(key){
    7.           // 把 obj 的 key 以'.'进行分割，变成数组
    8.         keys = key.split('.');
    9.           // val 是 key 对应的值
    10.         val = obj[key];
    11.           // data 是 Vue 的 data
    12.         data = that.$data;
    13.           // 遍历一遍前面分割的 keys
    14.           keys.forEach(function(key2,index){
    15.               // 到最后一个 key2 的时候，给 data 添加上 key 和 val
    16.             if(index+1 == keys.length){
    17.                 that.$set(data,key2,val);
    18.             }else{
    19.                   // data[key2] 是空，即data的根属性没有key2的时候，给data添加上key2
    20.                 if(!data[key2]){
    21.                     that.$set(data,key2,{});
    22.                 }
    23.             }
    24.               // 一层一层递进
    25.             data = data[key2];
    26.         })
    27.     });
    28. }

    它的运行效果类似这样
    输入如下：

    1. setData({
    2.     'a.b.c':1,
    3.   'd.e':2,
    4.   'f':3
    5. })

    运行效果如下：

    1. // this指向Vue实例
    2. this.$set(this.$data.a.b,c,1)
    3. this.$set(this.$data.d,e,2)
    4. this.$set(this.$data,f,3)

    「@浪里淘沙的小法师」