前端Vue日常工作中--computed与watch区别

前端Vue日常工作中--computed与watch区别

computed 和 watch 都是 Vue.js 中用于监听数据变化并执行相应操作的功能，但它们之间有一些关键的区别。通常情况下，使用计算属性更简单且具有更好的性能。只有在需要更高度自定义的场景，或者需要监听非响应式数据时，才需要使用 Watch。

1.基本说明

首先，对于computed与watch的简单介绍可以查看下方链接:

计算属性（computed）前端Vue日常工作中--computed计算属性

监听属性（watch）前端Vue日常工作中--Watch数据监听

1.1计算属性 (computed)：

1. 声明式： Computed 属性是声明式的，你只需要定义一个计算属性的函数，Vue.js 会负责追踪它的依赖关系，当依赖的数据变化时，自动重新计算。

2. 缓存： 计算属性是有缓存的，只有相关依赖发生改变时才会重新计算。这可以防止不必要的计算，提高性能。

3. 同步： 计算属性是同步执行的，它会立即返回计算结果。

4. 特点：

   • 计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生变化时，计算属性才会重新计算，否则会直接返回缓存的结果。
   • 计算属性通常用于派生出一些新的数据，而不是直接处理异步操作或副作用。

5. 用法：

   • 在Vue组件中使用computed属性，可以将其定义为一个函数，返回计算得到的值。
   • 计算属性可以通过get和set来定义，但通常只需要定义get，因为它负责计算属性的值。

   如果你需要根据一个或多个响应式数据生成一个新的数据，并且希望有缓存和同步的特性，使用计算属性更为合适。

<template>
  <div>
    <p>{{ computedProperty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataValue: 10
    };
  },
  computed: {
    computedProperty() {
      return this.dataValue * 2;
    }
  }
};
</script>

1.2监听属性 (watch)：

1. 命令式： Watch是命令式的，你需要明确指定需要监听的数据，并提供一个回调函数以响应数据变化。

2. 无缓存： Watch 没有缓存机制，每当监听的数据变化时，回调函数都会被调用。

3. 异步： Watch是异步执行的，它在数据变化后，DOM 更新前被调用。这使得它适用于执行异步或开销较大的操作。

4. 特点：

   • watch用于观察数据的变化，并在数据变化时执行特定的函数。
   • watch更灵活，可以执行异步操作，处理副作用，以及在数据变化时执行自定义的逻辑。

5. 用法：

   • 在Vue组件中使用watch属性，可以将其定义为一个对象，其中键是要观察的数据，值是回调函数。

   如果你需要在数据变化时执行异步或开销较大的操作，或者需要监听非响应式数据的变化，使用 Watch 更为适合。

<template>
  <div>
    <p>{{ watchedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataValue: 10,
      watchedValue: 20
    };
  },
  watch: {
    dataValue(newValue, oldValue) {
      this.watchedValue = newValue * 2;
    }
  }
};
</script>

1.3区别总结：

• 计算属性 (computed)：

  • 适用于基于依赖数据的派生值。
  • 具有缓存机制，只在相关依赖变化时重新计算。
  • 通常用于计算和返回一个新的派生值。

• 监听属性 (watch)：

  • 适用于对数据变化执行副作用或异步操作。
  • 不具有缓存机制，每次数据变化都会触发回调函数。
  • 通常用于监视数据变化并执行一些自定义逻辑。

选择使用哪种方式取决于你的具体需求，如果你只是需要计算一些数据，而且这些数据可以通过依赖的数据推导出来，那么使用计算属性更为合适。如果你需要在数据变化时执行异步操作、副作用或复杂逻辑，那么使用watch更为合适。

2.在父子组件中的一些区别

2.1计算属性 (computed) ：

父组件

<template>
  <div>
    <p>Parent Component</p>
    <ChildComponent :parentData="parentData" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: 10
    };
  },
  computed: {
    computedProperty() {
      return this.parentData * 2;
    }
  }
};
</script>

子组件

<template>
  <div>
    <p>Child Component</p>
    <p>Computed Property in Child: {{ computedProperty }}</p>
  </div>
</template>

<script>
export default {
  props: ['parentData'],
  computed: {
    computedPropertyInChild() {
      // 使用父组件传递的 prop 计算一个新的值
      return this.parentData * 3;
    }
  }
};
</script>

父组件有一个数据 parentData，并且定义了一个计算属性 computedProperty，这个属性是基于 parentData 的派生值。子组件接收了来自父组件的 parentData 作为 prop，并且在自己的计算属性 computedPropertyInChild 中使用了这个 prop 计算了一个新的值。

2.2监听属性 (watch) ：

父组件

<template>
  <div>
    <p>Parent Component</p>
    <ChildComponent :parentData="parentData" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: 10,
      watchedValue: null
    };
  },
  watch: {
    parentData(newValue, oldValue) {
      // 在父组件中监听 parentData 的变化，并执行一些操作
      this.watchedValue = newValue * 2;
    }
  }
};
</script>

子组件

<template>
  <div>
    <p>Child Component</p>
    <p>Watched Value in Child: {{ watchedValue }}</p>
  </div>
</template>

<script>
export default {
  props: ['parentData'],
  watch: {
    parentData(newValue, oldValue) {
      // 在子组件中监听 prop 的变化，并执行一些操作
      console.log('Parent data changed in child component:', newValue);
    }
  }
};
</script>

父组件使用了 watch 来监听 parentData 的变化，并在变化时执行一些操作。同时，子组件也使用了 watch 来监听来自父组件的 prop parentData 的变化，并在变化时执行一些操作。

使用计算属性适用于派生值的场景，而使用监听属性适用于需要在数据变化时执行特定逻辑的场景。