vue修改绑定数据更新视图的限制与解决

vue通过v-model（v-bind）进行数据绑定，将页面与数据相关联，以达到修改数据时同时可以修改页面的效果，但这个效果是有限制的。
1.vue使用数据绑定修改字符串时，可以通过该方式直接修改数据更新视图。

var vmain = new Vue({
			el: '#vue_id',
			data: {
				res:"修改前的数据",
			},
			methods: {
				//触发事件函数
				click(){
					this.res = "修改的数据";
				}
			}
		});

2.vue使用数据绑定修改数组对象时，由于 JavaScript 的限制，Vue不能检测到对象属性的添加或删除或修改，通过绑定直接修改数据无法更新视图，这时调用Vue.set方法，将相应属性添加到嵌套的对象上，才可以修改页面数据。

var vmain = new Vue({
			el: '#vue_id',
			data: {
				res:"修改前的数据数组或对象",
			},
			methods: {
				//触发事件函数
				click(){
					//将相应属性添加到嵌套的对象
					Vue.set(this.res,"属性名或数组下标","修改的数据");
				}
			}
		});

3…vue使用数据绑定修改多层嵌套的数组对象时，由于数据多层导致vue监听不到数据变化，通过绑定直接修改数据及将相应属性添加到嵌套的对象上也无法更新视图，这时调用vmain.$forceUpdate()方法，迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

var vmain = new Vue({
			el: '#vue_id',
			data: {
				res:"修改前多层嵌套的数据数组或对象",
			},
			methods: {
				//触发事件函数
				click(){
					//将相应属性添加到嵌套的对象
					Vue.set(this.res,"属性名或数组下标","修改的数据");
					//强制刷新，解决页面不会重新渲染的问题
					vmain.$forceUpdate();
				}
			}
		});