vuejs2 - Vue：更新数据属性会触发对整个数据的重新评估？

Question

我已经在 Vue 项目上工作了将近一年，今天我第一次观察到下面的意外行为......

这是代码沙箱的链接： https ://codesandbox.io/s/2bnem?file=/src/App.vue

以及来自上述链接的代码片段：

<template>
<div>
  <div>{{a}}</div>
  <div>{{translator(b)}}</div>
  <input v-model="a" />
</div>
</template>

<script>
export default {
  data() {
    return {
      a: 'a',
      b: 'b',
    }
  },
  computed: {
    translator: function() {
      return function(value) {
        console.log(`translated...: ${value}`)
        return value
      }
    }
  }
}
</script>

现在每次我按输入键时，都会触发翻译器。这是正确的行为吗？如果是这样，此问题的原因或此行为的背景原因是什么？

请注意，我的 vue 版本是 2.6.14（最新）。

标签： vuejs2

Answer 1

您最初的问题是您试图使用一种方法来呈现模板的一部分。像这样使用的方法将在每个更新周期执行，无论发生了什么变化。

更好的解决方案是使用计算属性。这是一个有点动态的示例，它data用计算属性包装了每个translator_x属性

<template>
  <div>
    <div>{{ a }}</div>
    <div>{{ translator_b }}</div>
    <input v-model="a" />
  </div>
</template>

<script>
const defaultData = {
  a: "a",
  b: "b"
}
export default {
  data: () => ({ ...defaultData }),
  computed: Object.fromEntries(Object.keys(defaultData).map(k => [
    `translator_${k}`,
    vm => {
      console.log("translated...", k)
      return vm[k]
    }
  ]))
};
</script>

translator_x只有当基础数据属性发生更改时，才会评估每个属性。