vue2响应式的缺点及解决办法

vue2响应式的原理：

通过Object.defineProperty() 对属性的读取、修改进行拦截。

Object.defineProperty(obj,'name', {
	get() {},
	ser() {}
})

存在问题：

• 由于只有get()、set() 方式，所以只能捕获到属性读取和修改操作，当 新增、删除属性时，捕获不到，导致界面也不会更新。

• 直接通过下标修改数组，界面也不会自动更新。

解决办法

• 修改属性时，使用 this.$set()
• 删除属性时，使用 this.$delete()

<script>
	export default {
		data() {
			return {
				obj: {
					name: '李华'，
					age: 16
				}
			}
		},
		methods: {
			// 添加属性
			addSex() {
				// 当我们这样新增属性时，界面是不会有变化的
				this.obj.sex = '男'

				// 我们要这么去添加属性，页面才会有变化
				this.$set(this.obj, 'sex', '男')
			}
			// 删除属性
			deleteName() {
				// 当我们这样删除属性时，界面是不会有变化的
				delete this.obj.name

				// 我们要这么去删除属性，页面才会有变化
				this.$delete(this.obj, 'name')
			}
		}
	}
</script>