请问，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>