vue数组渲染filter实现的三种方式

来到新公司实习，技术栈偏向vue一系（当然肯定不止），日常记录。

v-for 配合 v-if

v-if的优先级比v-for 要低，所以并行使用的时候其实是对每一个子元素进行一次v-if判断，所以可以实现。代码如下：

 <li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

使用计算属性

尤其在渲染数组时，计算属性非常适用，因为它存在一个缓存，当所关联的属性没有更新时，计算属性是不会再次触发计算的，这样极大的节省了资源开支。代码如下：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

使用method方法

v-for是接受计算的，所以也可以直接定义method。代码如下：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

最不推荐的方法

直接按照模板语法“Mustache”语法 (双大括号) 去写是最不推荐的方式。因此不仅每次都会重新进行计算，耗费不必要的资源，而且非常不美观。= =
如下：

{{arr.map(value => value+1)}}

小事

v-for是支持Object的，callback 默认的参数有三个，

参数名称	含义
value	按照Object.keys()取值的数组
key	元素的key值
index	元素在Object.keys()的索引值

那么问题就来了，Object.keys()是按照什么进行排序的呢？来日探索