Vue.js中如何为两个目标元素返回不同的computed计算结果

无法在同一个computed计算属性中基于绑定元素的id返回不同结果。计算属性是基于响应式依赖缓存的纯函数，执行时没有上下文感知当前被哪个DOM节点引用，所有绑定同一个计算属性的位置拿到的返回值完全一致，不可能做区分。

以下是两种可落地的实现方案：

方案1：拆分独立计算属性（推荐） #

这是最符合Vue设计规范的写法，逻辑清晰，自带缓存性能好，适合规则固定的场景。
修正后完整代码：

<!-- HTML部分 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p id="and">You Entered {{ andResult }}</p>
  <p id="dash">You Entered {{ dashResult }}</p>
  <input v-model="target" placeholder="Enter Your Target" />
</div>

// JS部分
new Vue({
  el: '#demo',
  data() {
    return {
      target: '',
    }
  },
  computed: {
    andResult() {
      if (!this.target) return ''
      return '`' + this.target.replaceAll(",", "` AND `") + '`'
    },
    dashResult() {
      if (!this.target) return ''
      return '`' + this.target.replaceAll(",", "` - `") + '`'
    }
  }
})

方案2：封装带参方法（适合多规则扩展） #

如果后续需要新增更多替换规则，不想重复编写类似的计算属性，可以把处理逻辑封装为方法，在模板调用时传入对应分隔符即可。
示例代码：

<!-- HTML部分 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p id="and">You Entered {{ formatResult(' AND ') }}</p>
  <p id="dash">You Entered {{ formatResult(' - ') }}</p>
  <input v-model="target" placeholder="Enter Your Target" />
</div>

// JS部分
new Vue({
  el: '#demo',
  data() {
    return {
      target: '',
    }
  },
  methods: {
    formatResult(separator) {
      if (!this.target) return ''
      return '`' + this.target.replaceAll(",", "`" + separator + "`") + '`'
    }
  }
})

注意：方法调用没有计算属性的缓存效果，target变化时每次渲染都会重新执行，如果处理逻辑复杂、数据量大，优先选择拆分计算属性的方案。

不推荐的思路说明 #

不要尝试在计算属性中通过DOM API获取元素id做逻辑判断，这种写法让数据逻辑和DOM结构强耦合，违背Vue数据驱动的设计原则，后续调整DOM结构时逻辑很容易意外失效，维护成本极高。

内容的提问来源于stack exchange，提问作者Suffii