计算属性侦听属性的区别

 

计算属性(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 事件处理:计算属性可以直接在模板中使用,其返回值作为模板的数据绑定,非常适合用于处理视图层的逻辑。而方法主要用于事件处理,需要在事件触发时手动调用。

你可能感兴趣的:(前端,vue.js,es6,javascript)