个人对vue的了解不是非常深入，从自学vue（半个月），到正式使用vue，现在差不多用了快3个月的时间，期间遇到了大大小小的坑可以说是不计其数，有些领域（如生命周期和异步操作的“冲突”）都没时间好好研究，甚至是碰都不敢碰，大部分情况都是敷衍了事（遵循，你先把东西做出来，且看起来是好的原则，实际上是胡搞毛搞搞好的），本文单纯的整理了一些自己在用vue的过程中遇到的一些“跳过的”坑，今天花一个工作日时间整理一下。不敢说都解决，只能说力所能及。
本文所涉及的问题尽量以实际场景出发，并一步步去解决这个问题。
问题1.computed、filters两种数据处理工具的局限性
场景：接口返回了一个数组 [1,2,3,4,5],要求前端处理一下数据，算出百分比。这个百分比可以拿来调整样式或展示数据。
解决方案：arrOnce/arrSum => 1/15,2/15...
备选工具：computed，filters，methods
针对以上这个需求，最最最合理的，最最最舒服的解决思路：把数组中的每一个值当作参数传入某"处理中心",处理中心用传入的值去，除以，保存在this中的数组的和（这个只需简单计算即可）。
处理中心选择：computed（未解决）
computed计算属性不能传参，他只能监听预先在data中设置好的值，由于将数组中的每个值预先定义好是不可能的事，因此computed，out！
刚才我说computed不能传参，这样的定义不是一个负责任的说法，这里我放一个demo，有兴趣的人可以感受一下computed中的变相传参是怎么一回事。
<template>
<div id="example">
<input v-model="helloworld"/>
<p>{{ hello }}</p>
<p>{{ world }}</p>
<p>{{ helloworld }}</p>
<button @click="changedata">事件触发</button>
</div>
</template>
<script>
export default {
data () {
return {
hello: 'hello',
world: 'world'
}
},
computed: { // getter，setter计算属性都有
helloworld: {
// getter
get: function () {
console.log('getter called')
return this.hello + this.world
},
// setter
set: function (newValue) {
console.log('setter called , newValue: ' + newValue)
this.hello = newValue
}
}
},
methods: {
changedata () {
// this.hello = 'hello~' //并不能触发set
this.helloworld = 'hello~world!'
}
}
}
</script>
请细细体味，只有直接！！！改变computed中的值才能触发set事件的蛋疼之处。wtf？
处理中心选择：filters（能解决，很傻）
刚才用computed遇到了不能传参的问题，那用filters已经解决传参这个问题了，但是，我以为filters的出现是为了解决computed的蛋疼，然鹅，更蛋疼的事情出现了，filters中的this竟然没有指向‘vue’，那这样岂不是访问不到保存在this.data中的数组了嘛？好吧，退而求其次，把数组以及当前元素都当作参数传入filters。（当然你也可以预先处理一下数组运算的结果传入，这样能省去在filters中处理数组的和的时间）。虽然这样可以解决上述实际问题，但总觉得哪里怪怪的。
处理中心选择：methods（能解决，性能稍次儿）
用methods既可以传参也可以访问this，具体怎么解决不说明了，但是methods和其他两种比较较为消耗性能，有兴趣的可以上网查一下相关方面的资料。