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

哦莫喜洛咦
  • 4
新手上路,请多包涵

先上代码:
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. 对于这种情况有没有更好的解决办法
回复
阅读 1.2k
2 个回答
林枫
  • 3.8k

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

<li 
        v-for="item in 20" 
        :class="{red:item===clickIndex}" 
        @click="clickIndex = item"
    >{{item}}</li>
君迹我心
  • 4.7k
  • Q1 这两种方式哪种更好,为什么?或者是说都一样?

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏