-
计算属性（Computed）
-
定义和作用
-
计算属性是基于它们的依赖进行缓存的。一个计算属性只有在它的相关依赖发生改变时才会重新求值。例如，有一个计算属性
fullName，它依赖于firstName和lastName。当firstName或lastName发生变化时，fullName会重新计算。 -
计算属性通常用于对多个数据进行处理并返回一个结果。例如：
-
-
var vm = new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
-
使用场景
-
当需要对数据进行一些复杂的逻辑处理来得到一个新值，并且这个新值依赖于现有的数据，同时希望在依赖数据不变时避免不必要的重复计算时，就适合使用计算属性。比如根据商品的单价和数量计算总价，总价会随着单价或数量的改变而重新计算，但单价和数量不变时，总价不需要重新计算。
-
-
侦听属性（Watch）
-
定义和作用
-
侦听属性用于观察和响应数据的变化。当被监听的数据发生变化时，对应的处理函数就会执行。例如，有一个
watch监听city变量：
-
-
var vm = new Vue({
el: '#app',
data: {
city: 'New York'
},
watch: {
city: function (newVal, oldVal) {
console.log('City changed from ' + oldVal + ' to ' + newVal);
}
}
});
-
使用场景
-
当需要在数据变化时执行异步操作或者开销较大的操作时，适合使用侦听属性。例如，当用户选择的城市发生改变时，需要向服务器请求该城市的天气数据，这种情况下使用
watch来监听城市数据的变化是合适的。
-
-
方法（Methods）
-
定义和作用
- 方法是定义在
methods中的函数，在模板中可以通过v - on指令来调用。每次调用方法时，方法内的代码都会执行。例如：
- 方法是定义在
-
var vm = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment: function () {
this.count++;
}
}
});
-
使用场景
-
方法通常用于定义事件处理函数，比如按钮点击事件、表单提交事件等。当需要执行一些操作，如改变数据、触发动画等操作时，可以定义方法来实现。例如，点击按钮增加一个计数器的值，这种与用户操作直接相关的场景就适合使用方法。
-
-
区别总结
-
缓存机制
- 计算属性有缓存，只有依赖的数据发生变化时才会重新计算；而方法每次调用都会执行函数内的代码；侦听属性本身不涉及缓存，主要关注数据变化的响应。
-
使用目的
- 计算属性用于根据已有数据计算得出新的数据；侦听属性用于在数据变化时执行特定的操作，特别是异步或复杂操作；方法用于定义操作行为，多与用户交互事件相关。
-
模板中的调用方式
- 在模板中，计算属性像数据属性一样直接使用（如
{{ fullName }}）；方法需要通过v - on等指令调用（如<button v - on:click = "increment">Increment</button>）；侦听属性不在模板中直接调用，而是自动响应数据变化。
- 在模板中，计算属性像数据属性一样直接使用（如
-
