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