computed , watch 的妙用

在 Vue.js（包括 Vue 2 和 Vue 3）中，computed 属性用于根据其他数据属性或计算属性动态计算值。这些计算属性 不是 普通的函数或变量，而是具有响应式特性的属性，因此它们的使用方式与普通变量或方法有所不同。以下是对您的问题的详细解答：

1. computed 属性作为变量使用

1.1 使用方式

在模板中，computed 属性可以直接作为变量使用：

<template>
  <div>
    <p>域名: {{ domain }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getDomain']),
    domain() {
      return this.getDomain;
    }
  }
};
</script>

说明：

• domain 是一个计算属性，可以在模板中像变量一样使用，例如 {{ domain }}。
• 当 getDomain 发生变化时，domain 会自动重新计算。

1.2 在脚本中使用

在组件的脚本部分，您也可以像访问普通属性一样访问 computed 属性：

export default {
  computed: {
    ...mapGetters(['getDomain']),
    domain() {
      return this.getDomain;
    }
  },
  methods: {
    printDomain() {
      console.log(this.domain); // 访问计算属性
    }
  }
};

说明：

• this.domain 可以像访问普通属性一样使用，它会自动返回计算后的值。
• 如果 getDomain 发生变化，this.domain 会自动更新。

2. computed 属性与方法的区别

虽然 computed 属性看起来像方法，但它们的行为与普通方法不同：

• 缓存性：

  • computed 属性是基于它们的依赖进行缓存的，只有在相关依赖发生变化时才会重新计算。
  • 这意味着如果依赖没有变化，多次访问 computed 属性会返回缓存的结果，性能更高。

• 使用方法：

  • 计算属性：用于基于其他数据动态计算值，适合用于模板中展示的数据。
  • 方法：每次调用都会执行函数体，适合用于处理事件或需要每次都执行的操作。

示例：

<template>
  <div>
    <p>计算属性: {{ computedValue }}</p>
    <p>方法: {{ methodValue() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    computedValue() {
      console.log('Computed 被调用');
      return this.count + 1;
    }
  },
  methods: {
    methodValue() {
      console.log('Method 被调用');
      return this.count + 1;
    }
  }
};
</script>

使用场景：

• 模板中多次使用：如果 computedValue 在模板中多次使用，只有第一次会输出 “Computed 被调用”，因为结果被缓存。
• 方法调用：每次调用 methodValue() 都会输出 “Method 被调用”，因为每次都会执行函数体。

3. computed 属性的命名

• 命名规范：

  • computed 属性的命名通常使用驼峰式（camelCase），例如 domain、getUserName。
  • 在模板中使用时，可以直接使用计算属性的名称。

• 避免与数据属性冲突：

  • 确保 computed 属性的名称不会与 data 或 props 中的属性名称冲突，以避免意外覆盖。

4. 注意事项

4.1 不要在 computed 属性中执行副作用

computed 属性应该是一个纯函数，避免在其中执行诸如修改数据、发起请求等副作用操作。如果需要执行副作用，应该使用 watch 或 methods。

错误示例：

computed: {
  domain() {
    this.someData = '新的值'; // 不推荐
    return this.getDomain;
  }
}

正确示例：

computed: {
  domain() {
    return this.getDomain;
  }
},
methods: {
  updateDomain() {
    this.someData = '新的值';
  }
}

4.2 使用 mapGetters 时注意命名

在使用 mapGetters 时，确保命名不会与现有的 computed 属性冲突。如果需要重命名，可以使用对象展开运算符：

computed: {
  ...mapGetters({
    domain: 'getDomain'
  }),
  // 其他计算属性
}

5. 总结

• computed 属性：用于基于其他数据动态计算值，可以像变量一样在模板和脚本中使用。
• 缓存性：具有缓存特性，性能更高。
• 命名规范：使用驼峰式命名，避免与数据属性冲突。
• 避免副作用：不要在 computed 属性中执行副作用操作。

通过以上解释，您应该能够正确理解和使用 Vue.js 中的 computed 属性。如果有更多具体问题，欢迎继续提问！

在 Vue.js 中，计算属性（computed properties） 默认情况下 不接受参数，因为它们是基于其依赖的响应式数据进行计算，并且这些依赖关系是在组件的响应式系统中自动跟踪的。不过，如果您需要基于某些参数动态计算值，有几种方法可以实现类似的效果。以下是详细的解释和解决方案：

1. 为什么计算属性不接受参数

计算属性本质上是基于其依赖的响应式数据进行缓存的 getter 函数。它们的设计初衷是为了根据组件内部的状态动态计算值，而不是根据外部传入的参数进行计算。因此，Vue 的计算属性不支持直接传递参数。

2. 如何实现类似参数化的计算

尽管计算属性本身不接受参数，但您可以通过以下几种方法实现类似参数化的计算：

2.1 使用方法（Methods）

如果需要基于参数动态计算值，使用方法（methods） 是最直接的方式。方法可以接受参数，并且每次调用时都会执行。

示例：

<template>
  <div>
    <p>计算结果: {{ computeValue(param) }}</p>
    <button @click="updateParam">更新参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: '初始值'
    };
  },
  methods: {
    computeValue(value) {
      // 这里的逻辑可以根据需要动态计算
      return `计算结果基于: ${value}`;
    },
    updateParam() {
      this.param = '新的值';
    }
  }
};
</script>

说明：

• computeValue 方法：接受一个参数 value，并返回一个基于该参数的计算结果。
• 调用方式：在模板中通过 {{ computeValue(param) }} 调用方法，并传递 param 作为参数。

优点：

• 灵活性：可以接受任意参数，并根据参数动态计算值。
• 简单直观：易于理解和实现。

缺点：

• 缓存：方法不会缓存结果，每次调用都会执行函数体，可能影响性能。

2.2 使用计算属性与内部依赖

如果需要基于某些参数进行计算，但这些参数是组件内部的响应式数据，可以通过计算属性依赖这些数据来实现。

示例：

<template>
  <div>
    <p>计算结果: {{ computedValue }}</p>
    <button @click="updateParam">更新参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: '初始值'
    };
  },
  computed: {
    computedValue() {
      return `计算结果基于: ${this.param}`;
    }
  },
  methods: {
    updateParam() {
      this.param = '新的值';
    }
  }
};
</script>

说明：

• computedValue：依赖于 param，当 param 变化时，computedValue 会自动重新计算。
• 调用方式：在模板中直接使用 {{ computedValue }}，无需传递参数。

优点：

• 缓存性：计算属性会缓存结果，只有在依赖变化时才重新计算，性能更高。
• 响应式：自动跟踪依赖关系，无需手动管理。

缺点：

• 参数限制：只能基于组件内部的响应式数据，无法直接接受外部参数。

2.3 使用闭包或高阶函数

如果确实需要基于动态参数进行计算，可以创建一个返回计算函数的高阶函数。这种方法结合了方法和计算属性的优点。

示例：

<template>
  <div>
    <p>计算结果: {{ getComputedValue(param) }}</p>
    <button @click="updateParam">更新参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: '初始值'
    };
  },
  computed: {
    getComputedValue() {
      // 返回一个函数，接受参数并返回计算结果
      return (value) => {
        return `计算结果基于: ${value}`;
      };
    }
  },
  methods: {
    updateParam() {
      this.param = '新的值';
    }
  }
};
</script>

说明：

• getComputedValue：是一个计算属性，返回一个函数。
• 调用方式：在模板中通过 {{ getComputedValue(param) }} 调用返回的函数，并传递 param 作为参数。

优点：

• 灵活性：可以接受参数并动态计算。
• 缓存性：如果返回的函数逻辑是固定的，可以利用闭包的特性进行优化。

缺点：

• 复杂性：实现方式较为复杂，可能影响代码可读性。

3. 实际应用中的建议

• 优先使用方法：如果需要基于参数进行计算，并且不介意每次调用都执行函数体，使用方法是最简单有效的方式。
• 使用计算属性处理响应式数据：如果计算逻辑依赖于组件内部的响应式数据，使用计算属性可以享受缓存和自动更新的优势。
• 结合使用：在某些复杂场景下，可以结合使用计算属性和方法，以实现更灵活的计算逻辑。

4. 示例总结

以下是结合上述方法的完整示例：

<template>
  <div>
    <!-- 使用方法 -->
    <p>方法计算结果: {{ computeValue(param) }}</p>

    <!-- 使用计算属性 -->
    <p>计算属性结果: {{ computedValue }}</p>

    <!-- 使用高阶函数 -->
    <p>高阶函数计算结果: {{ getComputedValue(param) }}</p>

    <button @click="updateParam">更新参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: '初始值'
    };
  },
  computed: {
    computedValue() {
      return `计算结果基于: ${this.param}`;
    },
    getComputedValue() {
      return (value) => {
        return `高阶函数计算结果基于: ${value}`;
      };
    }
  },
  methods: {
    computeValue(value) {
      return `方法计算结果基于: ${value}`;
    },
    updateParam() {
      this.param = '新的值';
    }
  }
};
</script>

输出：

方法计算结果: 方法计算结果基于: 新的值
计算属性结果: 计算结果基于: 新的值
高阶函数计算结果: 高阶函数计算结果基于: 新的值

5. 总结

• 计算属性不接受参数：因为它们是基于内部依赖的响应式数据进行计算的。
• 使用方法实现参数化计算：如果需要基于参数动态计算值，使用方法是最合适的选择。
• 结合响应式数据使用计算属性：如果计算逻辑依赖于组件内部的响应式数据，使用计算属性可以享受缓存和自动更新的优势。
• 灵活运用：根据具体需求，灵活选择使用计算属性或方法，或结合使用以实现复杂的计算逻辑。

通过以上解释，您应该能够理解如何在 Vue.js 中处理需要参数化的计算逻辑。如果有更多具体问题，欢迎继续提问！

自我总结 ：
computed 计算属性 （里面的方法名事实上就是一个变量，当依赖的属性发生变化的时候，就会自动执行，获取最新的值放在缓存中）

watch 检测属性 （里面的属性，其实就是一个组件定义了 的 变量，当这个变量的值发生变化 的时候，就会执行里面的方法）

共同点都是利用了，检测绑定的变量有没有变化， 当所依赖的变量发生变化的时候就会执行相应的方法。 watch 检测的是函数外面的变量； computed 检测的是函数里的变量。