vue的一些学习笔记，为什么不建议使用index(下标)作为key

1.methods方法与computed计算属性对比

• computed计算属性会进行缓存，多次调用只会执行一次，性能得到优化

2.ES6对象字面量增强写法

• 理解：就是边声明边赋值

//ES5的写法
const obj = {
  name: name,
  age: age,
  height: height,
  run:function(){}
}
//ES6的写法
const obj = {
  name,
  age,
  height,
  run(){}
}

3.v-on

3.1传参问题

• 在事件定义时，写函数时省略了小括号，但是方法本身需要一个参数的，这时，vue会默认将浏览器产生的event事件对象作为参数传入到方法中

<button @click="btn2Click">按钮2</button>
methods: {
  btn2Click(abc) {
  	console.log('-----',abc);
  },
}

• 在调用方法时，手动的获取到浏览器参数的event对象：$event
• 在调用方法中时不能省略$，否则会被当成变量

<button @click="btn3Click(123,$event)">按钮3</button>
methods: {
  btn3Click(a,event) {
  	console.log('----',a,event);
  }
}

3.2常用修饰符的使用

<!--事件冒泡：先打印btnClick 后打印divClick-->
<div @click="divClick">
<button @click="btnClick">按钮1</button>
</div>
<!-- 阻止冒泡：只打印btnClick -->
<div @click="divClick">
<button @click.stop="btnClick">按钮2</button>
</div>

<!--阻止默认事件，可以用来阻止自动提交-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent='submitClick'>
</form>

<!--监听键盘的键帽：回车之后再监听-->
<input type="text" @keyup.enter="keyup">

4.v-if与v-show条件为false时

• v-if：是从DOM中直接删除标签，只有一次切换时使用
• v-show：是添加了display:none，频繁切换时使用

5.v-for中遍历对象的几种情况

<!--1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
<ul>
	<li v-for="item in person"> {{item}} </li>
</ul>

<!--2.获取key 和value  格式：(value,key)-->
<ul>
	<li v-for="(value,key) in person"> {{value}} : {{key}} </li>
</ul>

<!--3.获取key 和value 及 index 格式：(value,key,index)-->
<ul>
	<li v-for="(value,key,index) in person"> {{index + 1}} - {{value}} : {{key}} </li>
</ul>

• key属性值
  • :key ，给每个节点一个唯一标识，使得函数内部性能更高，高效更新虚拟DOM
  • 这里不建议使用index(下标)作为key，一般使用id
    • 一旦删除或添加一个数据，这个数据之后的所有数据下标值都会被改变，导致以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立关联关系. 这就失去了 key 值存在的意义

6.数组方法

• 响应式的

letters:['a','b','c','d','e']
// 1.push方法 末尾添加 可以同时添加多个元素，返回值为添加完后的数组的长度
letters.push('f','g','h');
//2.pop() 末尾删除，返回值是删除的元素
letters.pop();
//3.shift() 删除数组第一个数据，返回值是删除的元素
letters.shift();
//4.unshift() 在数组最前面添加元素 也可以同时添加多个元素，返回值为添加完后的数组的长度
letters.unshift('8');
//5.splice() 可以删除元素/插入元素/替换元素
// splice(start,)
// 替换元素：第二个参数表示我们要替换几个元素，后面是用于替换前面的元素
letters.splice(1,2,'3','4');
// 删除元素：第二个参数传入你要删除几个元素，返回值是删除的元素
// 插入元素：第二个参数传入0，第三个参数传入要添加的元素
letters.splice(2,0,'f');
//6.sort() 排序
letters.sort();
//7.reverse() 翻转
letters.reverse();

• 普通

//1.将字符串转化为数组
arr.split()
//2.连接两个新数组
arr.concat()
//3.映射数组，返回一个新数组
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
//4.过滤数组，返回满足要求的数组
const words = ['spray', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);