vue this.$set()、this.$delete使用方法

简介：this.$set 是Vue中的一个实例方法，用于在响应式对象上设置新的属性或修改已有的属性，并确保这些属性也是响应式的。

使用this.$ set 可以解决Vue响应式系统的一个限制，即无法检测到通过索引直接设置数组元素或通过Object.defineProperty添加的属性的变化，所以通过this.$set 方法，可以显式地告诉Vue，某个属性的值已经发生了变化，从而触发视图的更新。

data(){
	return {
		obj:{
			name:'小明',
			age:20
		},
		item:'weight',
		arr:[
			{
				name:'小明',
				age:20
			},
			{
				name:'小金',
				age:22
			}
	    ]
	}
}

一、对象 使用this.$set()，修改和新增

基本语法：
this.$set(需要改变的对象，"需要改变的对象属性"，"新值")

//对象修改
this.$set(this.obj,'name','小杨')  // age:20,name:'小杨'

//对象新增
this.$set(this.obj,'sex','男')  // age:20,name:'小杨',sex:'男'

3、对象新增未知属性（这里的item是传递的参数，不带引号，"reading"是参数值）
this.$set(this.obj,this.item,'120') //weight:120, age:20,name:'小杨',sex:'男'

二、数组 使用this.$set()，修改和新增

1、数组修改

基本语法：
this.$set(需要修改的数组，需要修改的数组下标，{ "要修改的数组对象，一个/多个" })

this.$set(this.arr,0,{name:'小杨',age:99}) //arr:[{name:'小杨',age:99},{name:'小金',age:22}]

2、数组新增
（1）首先需要获取新增的数组长度：

let length = this.arr.length

this.$set(this.arr,length,{name:'小水',age:'88'})  //arr:[{name:'小杨',age:99},{name:'小金',age:22},{name:'小水',age:'88'}]

三、同理，执行删除操作时，对象或数组不更新时可以使用this.$delete

this.$delete(this.obj,"name")

this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。
使用this.$delete 可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete 方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。