关于API这东西，前端各个框架都是不同的，且都经常更新，不用死记，所以本篇博客记录一下Vue中业务上常用的API（稍复杂些的API，简单的略）

Vue中的数组操作

• 循环

<ul>
	// FAQ: key值一般不取index（数组下标值） 取唯一的id值
	//（若一个页面有多个数组，index会有多个，key值则失去了唯一性）
	<li v-for="(item, index) in list" :key="item.id">{{item.name}}</li>
<ul>

• 改变数组值

list:['a','b','c'];		// 此为data中的数组
list[0] = 'aa';			// 此种修改是无效的，UI界面不会重新渲染 这是应该注意的
// 正确的姿势 通过调用 $set(array, index, value) 
// 传参：1. 要操作的数组  2. 下标值  3. 修改的值
this.$set(this.list, 0, 'aa');	//  或 Vue.$set(this.list, 0, 'aa');

• 对象数组元素交换位置（适用于业务上的，列表交换和上下移动）

list:[
	{	
		id:1,
		name: '小明',
	},
	{	
		id:2,
		name: '小红',
	},
	{	
		id:3,
		name: '小绿',
	},
]
// 上下移动
function changeSort(type, index){
	let tempArray;
	// 上移
	if(type  == 'up'){
		  // 搞个临时数组接收一下
		  tempArray =  this.list[index-1];
		  // 交换
          this.$set(this.list, index-1,this.list[index]);
		  this.$set(this.list, index, tempArray);
	}else{
		 tempArray =  this.list[index + 1];
		 this.$set(this.list, index + 1,this.list[index]);
		 this.$set(this.list, index, tempArray);
	}
}
//  随机调换也是一样的，传index就可以了
// ...代码略

• 删除数组元素

this.$delete(this.list, index);	// index 下标值

Vue中的对象操作

obj: {
	name: '猪小明',
	age: 18,
	class: '三年二班'
}

• 修改

this.$set(this.obj, 'name',  '王八蛋');	// obj 中的 name 从 “朱小明” 变成了 “王八蛋”

• 删除

this.$delete(this.obj, "age");	// obj中的age没得了

Vue中的 $nextTick

这玩意太长，下次单独写一篇，放个链接（先去恰个羊肉火锅，告辞！）

本篇博客会不定时更新，记录Vue中各种常用的API和容易踩的坑，需要的同学可以收藏一波，如果对你有帮助，可以在评论区扣个“有用”，然后再点个赞，感谢感谢~