[TOC]

v-for遍历数组

<div id="app">
  <ul>
    <li v-for="(item, index) in names" key="index">{{index+1}}_{{item}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['a','b','c','d']
    }
  })
</script>

v-for遍历对象

<div id="app">
  <ul>
    <!-- 这时候遍历对象拿到的值是键值对中的value，这里就是ryan 23 1.75 function(){~~} -->
    <li v-for="item in info">{{item}}</li>

    <!-- 这种方式就可以显示对象中的一个个键值对，注意顺序，默认第一个是value -->
    <li v-for="(value, key) in info">{{key}}: {{value}}</li>

    <!-- 获取key,value,index -->
    <li v-for="(value, key, index) in info">{{key}}: {{value}}: {{index}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'ryan',
        age: 23,
        height: 1.75,
        eating: function () {
          console.log('eating')
        }
      }
    }
  })
</script>

组件的key属性

  • 官方推荐我们在使用v-for时，给对应的元素或者组件添加一个 :key 属性
  • 这个其实和Vue的虚拟DOM的Diff算法有关系，当有很多列表节点时，我们希望在其中插入一个新的节点，而Diff算法默认执行起来是这样的：将新插入节点后面的节点全部重新更新为其上一个节点，这样效率很低，所以我们考虑使用key来给每个节点做一个唯一标识，Diff算法就可以正确识别此节点，然后找到正确的位置来插入新的节点
  • 所以一句话：key的作用主要就是为了高效地更新虚拟DOM

哪些数组方法是响应式的，哪些不是

  • 能做到响应式的方法：push() pop() shift() unshift() splice() sort() reverse() ```html
    • {{item}}


- 可变参数，如果要实现10个数字相加，不可能去写10个参数，可以使用如下方法
```javascript

  function sum(...num) {
    let result = 0;
    for(item in num) {
      result += item
    }

    return result
  }
  let total = sum(1,2,3,4,5,6,7,8,9,10);
  console.log(total)