Vue.js 数据更新视图不同步更新的处理

错误做法：

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

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

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

列如：

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

正确做法:

vue.js

在vue.js中直接使用$set()方法进行更新
参考地址：cn.vuejs.org/v2/guide/re…

uni-app

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

实例：

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

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