vue 中的set 方法 解决列表渲染的问题

列表渲染中，可能值变了但是页面没有响应。

Vue 提供了 set 方法，解决这个问题。

		var app = new Vue({
			el: '#app',
			data:{
				onelist: [{
					id: "010101020304",
					text: "hello"
				},{
					id: "0202020304",
					text: "ok"
				},{
					id: "0303030405",
					text: "yes"
				}
				],
				oneobject: {
					name: "Tom",
					age: 18,
					gender: "male"
				}
			}
		})
	</script>

 

方法一 Vue 的set 方法

对象：通过 Vue.set(app.oneobject,"address","c") 来修改数据并响应

数组：通过 Vue.set(app.onelist,1,"c") 来修改数据并响应

方法二 Vue 实例的方法

对象：通过 app.$set(app.oneobject,"address","c")

数组：通过 Vue.set(app.onelist,1,"c") 来修改数据并响应

 

总结，vue 中改变数组，且响应的三种方式：

改引用，使用push 等变异方法改数组，vue 中的set 方法

vue 中改变对象，且响应的两种方式：

改引用，vue 中的set 方法。