前端 - vue2项目，computed和watch带来的问题，该怎么解决？

Question

场景是这样的，一张新建/编辑页，编辑页的数据是接口获取的。页面里的表单元素里有一些复杂的计算逻辑，请问：
1.计算逻辑是写在methods里，然后表单元素change或者input的时候调用它，还是直接写在computed里计算它？
2.我一开始是这么写的，computed计算出需要的结果a,b,c,d（且这四个值又能通过表单元素被修改，如input）。然后watch监听a,b,c,d的变化，赋值给表单元素绑定的值。但是发现一个问题，在编辑页的时候，由于表单数据是接口获取的，在接口获取到后，computed会计算，从而watch监听到，此时假设a后端返回的值是人为修改后的数值1，但是实际被computed计算成了2，就导致页面展示数据是计算后的。这就有问题。该如何解决？
3.如果写在change或者input里感觉就会比较恶心，需要考虑的情况复杂，尤其是涉及到多个值联动的情况。

Answer 1

1. 首先，Vue 是 MVVM 框架，MVVM 的核心是数据驱动，应该尽量维护数据而不是 UI
2. 在此基础上，我们应该维护最底层的数据，高层数据交给框架处理，换言之，就是交给 computed 处理
3. 尽量少用 watch，也尽量不侦听事件，把高层数据和视图变换留给框架
4. 所以数据返回后，就只替换底层数据，这样不应该出问题。

Answer 2

1.尽量写computed，不用太考虑依赖值变动的情况
2、
先给页面一个变量判断页面的数据是不是初始化了，后端返回值还没初始化的时候不要触发computed逻辑:

<template>  <div>    <!-- 表单元素绑定到计算属性的值 -->    <input v-model="computedValue">  </div></template><script>export default {  data() {    return {      // 初始化标志      initialized: false,    };  },  computed: {    // 计算属性，根据需要的逻辑计算值    computedValue() {      if (this.initialized) {        // 在初始化完成后才进行计算        return this.calculateValue();      } else {        // 在初始化之前返回接口数据或默认值        return this.apiData || defaultValue;      }    },  },  methods: {    // 复杂的计算逻辑    calculateValue() {      // 在这里进行计算      return /* 计算结果 */;    },  },  created() {    // 从接口加载数据    this.loadDataFromApi().then((data) => {      // 将接口数据赋值给data属性      this.apiData = data;      // 设置初始化标志为true，触发computed计算      this.initialized = true;    });  },};</script>

Answer 3

该问题涉及到Vue.js中的computed属性和watch监听器，以及它们的使用和问题解决方案。

1. 关于计算逻辑的写法，建议将其直接写在computed属性中，因为computed属性会在依赖的计算属性发生变化时重新计算，这样可以避免在表单元素change或input时进行重复计算。
2. 关于computed计算结果被修改的问题，可以通过在computed属性中设置缓存来解决。在computed属性中添加一个名为cache的属性，并在计算函数中使用该属性进行计算。这样，如果计算结果没有变化，那么下次计算时就可以直接使用缓存结果，避免重复计算。
3. 关于多个值联动的情况，可以使用Vue.js中的依赖关系来避免重复计算。在computed属性中添加依赖关系，让Vue.js自动根据依赖关系更新计算结果。例如：

computed: {  result() {    const a = this.a;    const b = this.b;    // 计算结果...  },  dependencyA() {    return this.a;  },  dependencyB() {    return this.b;  }}

这样，当a或b发生变化时，Vue.js会自动更新result的计算结果，而不需要手动调用computed属性的计算函数。