＜ 在Vue中 “ 数据改变 ” 却不触发 “ 视图更新 ” 问题解决 ＞

> 问题背景：

在前端开发中（ Vue 2 ），我们时常会遇到有关数据渲染相关的问题。举个栗子 🌰 来说，比如：在使用 element-UI form表单组件时，如果变量没有按照规范操作数据，往往容易出现数据输入了，但是绑定数据的组件并不买单展示的情况。又或者是，数据压根无法渲染，也无法修改的情况出现。 接下来给大家讲讲 Vue 数据渲染容易踩坑的点！！！

---

> 无法触发 “ 视图更新 ” 的原因

在 Vue2 中 用 “ 数组下标修改值时 ” 或者 “ 新增对象Key值时 ” ，这两种情况下，Vue的 devsrve函数 是监听不到数据的变化的，从而导致 数据更新了，但视图却因为数据更新没有被监听到，无法触发更新。

---

> 实际案例

1、数组利用下标修改值

错误案例：

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 错误写法，这样子写是不会触发视图更新的
		  this.arr[0] = "CSS"
		}
	}
})

解决方案

①. 可以利用this.$set( arr | obj , index | key, value )

• 参数一：目标数据

• 参数二：目标数据的下标或者key值

• 参数三：所赋予的值

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 借助 $set函数 对数据进行操作
			this.$set(this.arr, 0, "CSS")
		}
	}
})

②. 可以利用 JavaScript 中对数组重写的splice方法

• 参数一：所要处理目标数据的起点下标

• 参数二：所要处理目标数据的结束下标

• 参数三：所赋予的值

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 借助 splice 函数 对数据进行操作
			this.arr.splice(0, 1, "CSS")
		}
	}
})

③. 重新声明一个变量深拷贝一下当前这个数组然后重新赋值即可

科普： 深拷贝是指拷贝一个对象的数据之前先给拷贝的对象创建一个堆地址，这样当拷贝的对象指向的堆中的数据改变时，被拷贝的对象堆中的数据并不会被改变（意思就是a，b指向不同的堆）

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 深拷贝数据
			let newArr = JSON.parse(JSON.stringify(this.arr))
			newArr[0] = "CSS"
			this.arr = newArr
		}
	}
})

2、对象新增key值时

错误案例

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 这样给对象新加key值得方式是不响应的
			this.objInfo['item-2'] = "456" 
		}
	}
})

解决方案

①. 可以利用this.$set( arr | obj , index | key, value )

• 参数一：目标数据

• 参数二：目标数据的下标或者key值

• 参数三：所赋予的值

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 借助 $set函数 对数据进行操作
			this.$set(this.objInfo, 'item-2', "456")
		}
	}
})

③. 重新声明一个变量深拷贝一下当前这个数组然后重新赋值即可

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			// 深拷贝数据
			let newArr = JSON.parse(JSON.stringify(this.objInfo))
			newArr['item-2'] = "456"
			this.arr = newArr
		}
	}
})

③. 可以利用Object.assign()方法

• 参数一：最后处理完返回的数据

• 参数二：被插入数据的对象

• 参数三：插入的值

new Vue({
	el: "#app",
	data: {
		arr: ["Javascript", 'Vue'],
		objInfo: {
			'item-1': "123"
		}
	},
	methods: {
		upDateData() {
			this.newObj = Object.assign({}, this.objInfo, { 'item-2': "456" })
		}
	}
})

---

大致内容就到这里结束啦，如果觉得有帮助的话！ 希望不要吝啬手中的赞！ 给小温点点赞！点个关注吧！