Vue 常用API整理

偏执的太偏执、 2022-12-29 02:17 136阅读 0赞

关于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和容易踩的坑**，需要的同学可以收藏一波，如果对你有帮助，可以在评论区扣个“有用”，然后再点个赞，感谢感谢~