dede网站后台模板/全网整合营销平台

    个人对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: {// getterget: function () {console.log('getter called')return this.hello + this.world},// setterset: function (newValue) {console.log('setter called , newValue: ' + newValue)this.hello = newValue}}},methods: {changedata () {// this.hello = 'hello~' //并不能触发setthis.helloworld = 'hello~world!'}}
}
</script>

    请细细体味，只有直接！！！改变computed中的值才能触发set事件的蛋疼之处。wtf？

    处理中心选择：filters（能解决，很傻）

    刚才用computed遇到了不能传参的问题，那用filters已经解决传参这个问题了，但是，我以为filters的出现是为了解决computed的蛋疼，然鹅，更蛋疼的事情出现了，filters中的this竟然没有指向‘vue’，那这样岂不是访问不到保存在this.data中的数组了嘛？好吧，退而求其次，把数组以及当前元素都当作参数传入filters。（当然你也可以预先处理一下数组运算的结果传入，这样能省去在filters中处理数组的和的时间）。虽然这样可以解决上述实际问题，但总觉得哪里怪怪的。

    处理中心选择：methods（能解决，性能稍次儿）

    用methods既可以传参也可以访问this，具体怎么解决不说明了，但是methods和其他两种比较较为消耗性能，有兴趣的可以上网查一下相关方面的资料。