VUE_uniapp、vue 中data 数组更新后页面不同步动态渲染更新

朴灿烈づ我的快乐病毒、 2022-12-12 15:15 437阅读 0赞

#### 错误做法： ####

直接对数据元素进行更改，错误做法：

// 不能动态响应
    this.photoArr[index].weight= 200;

这种修改方式确实把数据给更改成功了，在控制台也能够打印出更改后的值，但是页面不会同步更新。原因如下：

> 由于 JavaScript 的限制 Vue 不能检测以下数组的变动\[1\]：  
> 当你利用索引直接设置一个数组项时，例如：vm.items\[indexOfItem\] = newValue  
> 当你修改数组的长度时，例如：vm.items.length = newLength

列如：

var vm = new Vue({ 
      data: { 
        item: ['a', 'b', 'c']
      }
    })
    vm.item[1] = 'x' // 不是响应性的
    vm.item.length = 2 // 不是响应性的

#### 正确做法: ####

##### vue.js #####

在vue.js中直接使用[$set()][set]方法进行更新  
参考地址：[https://cn.vuejs.org/v2/guide/reactivity.html\#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9][https_cn.vuejs.org_v2_guide_reactivity.html_E6_A3_80_E6_B5_8B_E5_8F_98_E5_8C_96_E7_9A_84_E6_B3_A8_E6_84_8F_E4_BA_8B_E9_A1_B9]

##### uni-app #####

// 直接更新数组某个元素的属性，视图上不会同步更新，要使用这种方式。
    /** * @param photoArr 所要更新的数组 * @param pIndex 所要更新的数组的哪一项 * @param pItem 更新后的值 */
    that.$set(that.photoArr, pIndex, pItem);

#### 实例： ####

data(){ 
    	return { 
    		list:[
    			{ name:123,id:1},
    			{ name:"测试",id:2}	
    		]
    	}
    }

> 调用方法：this.$set( target, key, value )  
> target：要更改的数据源(可以是对象或者数组)  
> key：要更改的具体数据  
> value ：重新赋的值

mounted() { 
    	this.list[2] = { name:"最新数据，但不能同步渲染",id:3};
    	console.log(this.list[2]);//控制台已经打印出来了
    	this.$set(this.list,2,{ name:"最新数据",id:3});//用this.$set方法把更新的数据更新到视图上去
    }

[set]: https://cn.vuejs.org/v2/api/#vm-set
[https_cn.vuejs.org_v2_guide_reactivity.html_E6_A3_80_E6_B5_8B_E5_8F_98_E5_8C_96_E7_9A_84_E6_B3_A8_E6_84_8F_E4_BA_8B_E9_A1_B9]: https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9