请问，vue中methods传参，改成 computed计算属性 然后返回一个函数的写法有什么区别吗，那种更好或者都一样？

Question

先上代码：
html:

<ul id="app">
    <li 
        v-for="item in 20" 
        :class="computedClass(item)" 
        @click="clickIndex = item"
    >{{item}}</li>
</ul>

js:

    data:{
        clickIndex:-1
    },
    methods:{
        methodsClass(index){
            console.log('methodsClass')
            return this.clickIndex === index ? 'red' : '';
        },
    },
    computed:{
        computedClass(){
            console.log('computedClass')
            return (index) => {
                console.log(index)
                return this.clickIndex === index ? 'red' : '';                    
            }
        }
    }
    

需求：我有个class，需要动态绑定，而且需要传入参数。

1. 如果用 methods 中的方法的话，如果有20个元素，每点击其中一个元素一次，就会执行20次方法。
2. 如果换成 computed 中的计算属性 ，只执行一次，但是返回的闭包也会执行20次。

问题：

1. 这两种方式哪种更好，为什么？或者是说都一样？
2. 对于这种情况有没有更好的解决办法

Answer 1

如果第二个问题有答案，那第一个问题就不存在
正确姿势：

<li 
        v-for="item in 20" 
        :class="{red:item===clickIndex}" 
        @click="clickIndex = item"
    >{{item}}</li>

Answer 2

• Q1 这两种方式哪种更好，为什么？或者是说都一样？

A1 这两种方法都不好，当然，比烂的话， computed 返回函数的方法要更差劲一些。
设计 method 接口的本意是作为处理事件的回调函数，用来渲染数据显然是违背了这个本意；computed 是设计出来缓存数据的，通常用来代替标签中那些比较占性能的表达式，把它返回的函数再执行一遍的话，还不如直接写表达式。
按照题干中的写法，每刷新一次，method或是 computed 返回的函数都会被重新执行，显然是进行了性能负优化。

• Q2 对于这种情况有没有更好的解决办法？

A2 参考楼上的写法(red 用引号包裹起来)，并且加个 key 属性；
也可以在 computed 里展开数组，再渲染到模板里去，这种会多用一个数组的内存，也不算很奢侈。