vue中某方法，被重复调用多次？

Question

问题：现在每次改变一项item的值时， 都会循环翻译所有的值。
但如果我有几十上百项，简直浪费资源。
现在需要的是，改变某一个item的value， 只调用这一次的方法，其他item
请问大家怎样才能解决这个问题
如果加上更多的 li标签

            <li v-text="trans2text(items[0].value)"></li>
            <li  v-text="trans2text(items[1].value)"></li>
            <li v-text="trans2text(items[0].value)"></li>
            <li  v-text="trans2text(items[1].value)"></li>
            <li v-text="trans2text(items[0].value)"></li>
            <li  v-text="trans2text(items[1].value)"></li>

就会调用更多无用的方法

代码：https://runjs.cn/code/597nybxz
演示地址：https://runjs.cn/detail/597nybxz

Answer 1

初始化以及数据变化的时候把结果算出来

Answer 2

实话说，看了你的代码和演示，完全蒙的——如果你只是想点某个东西，改变某个值，你完全可以直接change方法中做完就可以了，为什么还得给v-text绑定一个方法呢（实话说我也是第一次见到v-text这种用法的，骚到我了），你既然能够在change方法中传入某个关键值（0），那你直接修改关键值对应的items的值就可以了呗。而页面上li节点只负责渲染显示出结果就OK了。

个人对VUE研究的也不够深，但是我对vue的理解就是，它是一套以数据变化为驱动的框架，所以用vue处理页面逻辑，也尽量以数据层的变化来完成就可以了。所以说实话你的这个需求我确实是被整蒙了，也可能其实需求并不是这样的，而是你自己先入为主以这种实现方式做了的缘由吧。

如果可以，建议你先把你的页面的完整点的需求描述一下，你产生的这个问题首先确实本人搞不清到底是如何产生的，但是建议你换一种方式去做这个需求，你现在的这种实现方式太麻烦，而且出了问题自己都找不到原因。与其这样漫无目地的问人，不如自己再找找其他方式

Answer 3

这个和items无关，哪怕是一个普通依赖变量a,items改变也是会触发所有更新的,因为是基于组件的更新，可以参考https://github.com/vuejs/vue/...

<li>{{trans2text(a)}}</li>

data(){
  return {
    a: 'haha'
  }
}

所以为了尽量使用comupted来处理

<li>{{aa}}</li>

data(){
  return {
    a: 'haha'
  }
}
computed:{
  aa(){
    return this.trans2text(this.a)
  }
}

如果是遍历出来的类似例子，可以采用执行change的方式时候，保存当前改变的index，然后在直接处理

  //mounted的时候已经初始化了value
  <li v-for="(v,index) in items" v-text="v.value"  @click="change(index)"></li>


  change:function(index){
    this.items[index].value = this.trans2text('haha');
  }

Answer 4

<div id="app">  
        <ul>
            <li for="(item, index) in items" v-text="dict[item.value]"></li>
        </ul>
        <button @click="change">改变item0</button>
    </div>