H5W3
当前位置:H5W3 > 问答 > 正文

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

先上代码:
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. 对于这种情况有没有更好的解决办法

回答

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

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

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

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

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

未经允许不得转载:H5W3 » 请问,vue中methods传参,改成 computed计算属性 然后返回一个函数的写法有什么区别吗,那种更好或者都一样?

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址