计算属性侦听属性的区别

 

计算属性(computed)是Vue中的一个特殊属性，它根据依赖的数据进行计算，并返回计算结果。计算属性的值会根据其相关依赖项的变化而自动更新，类似于一个响应式的缓存。计算属性可以用来处理一些复杂的逻辑计算，避免在模板中编写过多的逻辑。

侦听属性(watch)用于监听指定的数据变化，并在变化时执行相应的回调函数。侦听属性可以用来响应数据的变化，并执行一些异步操作或复杂的逻辑处理。与计算属性不同，侦听属性不能直接返回一个计算结果，而是通过回调函数来处理数据的变化。

目录

计算属性

 侦听属性

 方法

使用场景 

总结 

1.计算属性和侦听属性的区别 

2.计算属性和方法的区别 

---

计算属性

计算属性： 计算属性是Vue.js提供的一种便捷的方式来处理基于响应式数据的计算逻辑。计算属性会根据它的依赖进行缓存，只有在依赖发生改变时才会重新计算。计算属性适合用于需要进行复杂计算的场景，而且多个组件可以共享同一个计算属性。

data() {
  return {
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  }
},
computed: {
  evenSum() {
    return this.numbers.filter(num => num % 2 === 0).reduce((acc, cur) => acc + cur, 0);
  }
}

 侦听属性

侦听属性： 侦听属性允许我们观察和响应数据的变化，当数据发生变化时，侦听属性会触发执行指定的回调函数。侦听属性适合用于需要执行异步操作或复杂逻辑的场景

data() {
  return {
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    evenSum: 0
  }
},
watch: {
  numbers: {
    handler: function(newVal, oldVal) {
      this.evenSum = newVal.filter(num => num % 2 === 0).reduce((acc, cur) => acc + cur, 0);
    },
    deep: true
  }
}

 方法

方法需要手动调用才会执行，不会自动更新。 

data() {
  return {
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    evenSum: 0
  }
},
methods: {
  calculateEvenSum() {
    this.evenSum = this.numbers.filter(num => num % 2 === 0).reduce((acc, cur) => acc + cur, 0);
  }
}

使用场景 

1.计算属性（computed）适用于以下场景：

• 当需要计算出 complex 的数据结构时，例如计算出一个对象的某个属性的值，或者对数据进行汇总和计算等。
• 当需要在数据变化时重新计算出某个值时，例如计算出某个数据的总和或平均值等。
• 当需要在数据变化时触发视图的更新时，例如在某个数据变化时更新相关的表单控件。

2.侦听属性（watch）适用于以下场景：

• 当需要监听某个数据的变化时，例如监听某个数据的变化来触发其他操作。
• 当需要在数据变化时执行一些操作，例如在某个数据变化时更新相关的表单控件。
• 当需要在数据变化时执行一些验证或校验操作，例如在某个数据变化时验证该数据是否符合要求。

3.方法适用于以下场景：

• 当需要对数据进行一些操作时，例如对数据进行排序、过滤等操作。
• 当需要对数据进行一些处理时，例如对数据进行转换、格式化等操作。

总结 

1.计算属性和侦听属性的区别 

• 计算属性(computed)：计算属性是一个函数式的属性，它根据依赖的数据进行计算，并返回计算结果。计算属性的值会根据其相关依赖项的变化而自动更新，类似于一个响应式的缓存。计算属性适用于需要根据依赖数据进行计算，并将计算结果作为一个属性来使用的场景。

• 侦听属性(watch)：侦听属性用于监听指定的数据变化，并在变化时执行相应的回调函数。侦听属性可以用来响应数据的变化，并执行一些异步操作或复杂的逻辑处理。侦听属性适用于需要在特定数据变化时执行一些特定操作的场景，比如发起异步请求、处理复杂逻辑等。

2.计算属性和方法的区别 

• 自动更新 vs 手动调用：计算属性会根据其相关的依赖项自动更新，只在相关依赖项发生变化时才会重新计算。而方法需要手动调用才会执行，不会自动更新。

• 缓存结果 vs 每次调用：计算属性具有缓存的特性，可以将计算结果缓存起来，只在相关依赖项发生变化时才会重新计算。而方法每次调用时都会执行，不会缓存结果。

• 计算逻辑 vs 执行操作：计算属性用于处理需要根据依赖数据进行计算并返回结果的场景，将复杂的逻辑封装在属性中，以便在模板中直接使用。而方法用于执行特定的操作，可以包含任意逻辑代码，一般用于处理事件的响应或执行一些操作。

• 模板使用 vs 事件处理：计算属性可以直接在模板中使用，其返回值作为模板的数据绑定，非常适合用于处理视图层的逻辑。而方法主要用于事件处理，需要在事件触发时手动调用。