vue进阶测试——computed，filters两种数据处理工具的局限性

约定不等于承诺〃 2021-09-15 16:54 189阅读 0赞

个人对vue的了解不是非常深入，从自学vue（半个月），到正式使用vue，现在差不多用了快3个月的时间，期间遇到了大大小小的坑可以说是不计其数，有些领域（如生命周期和异步操作的“冲突”）都没时间好好研究，甚至是碰都不敢碰，大部分情况都是敷衍了事（遵循，你先把东西做出来，且看起来是好的原则，实际上是胡搞毛搞搞好的），本文单纯的整理了一些自己在用vue的过程中遇到的一些“跳过的”坑，今天花一个工作日时间整理一下。不敢说都解决，只能说力所能及。

本文所涉及的问题尽量以实际场景出发，并一步步去解决这个问题。

问题1.computed、filters两种数据处理工具的局限性

场景：接口返回了一个数组 \[1,2,3,4,5\],要求前端处理一下数据，算出百分比。这个百分比可以拿来调整样式或展示数据。

![70][]

解决方案：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和其他两种比较较为消耗性能，有兴趣的可以上网查一下相关方面的资料。

[70]: /images/20210813/847f8c8d817d47cbac171868975347d2.png