vue2 - Day02 -计算属性（computed）、侦听器（watch）和方法（methods）

在 Vue.js 中，计算属性（computed）、侦听器（watch）和方法（methods）都是响应式的数据处理方式

---

1. 方法（Methods）

1.1. 是什么

在 Vue 中，方法（methods）是定义在 Vue 实例中的函数，用来处理一些动作或逻辑。它们可以通过事件绑定触发，也可以在代码中显式调用。每次方法被调用时，都会执行其中的逻辑，不会缓存计算结果。

1.2. 怎么用

方法通过 Vue 实例中的 methods 选项定义，可以通过事件触发（如 click、submit）或显式调用。

示例：

new Vue({el: '#app',data: {firstName: 'John',lastName: 'Doe'},methods: {fullName() {return this.firstName + ' ' + this.lastName;},greet() {alert('Hello, ' + this.firstName + '!');}}
});

<div id="app"><p>{{ fullName() }}</p> <!-- 调用 fullName 方法 --><button @click="greet()">Greet</button> <!-- 绑定事件，点击时调用 greet 方法 -->
</div>

1.3. 特点

• 每次调用都会执行：方法没有缓存机制，每次调用都会执行方法内部的逻辑，可能会有性能开销。
• 适合执行副作用：方法一般用于处理事件、交互、调用 API、执行动画等。
• 不能缓存：每次调用方法时，都会重新执行其中的代码。
• 适合函数逻辑：方法用于处理需要执行的业务逻辑，如响应用户输入、提交表单等。
• 不依赖于计算属性：方法与计算属性不同，它不关注其他属性的变化，因此不适用于根据响应式数据自动计算和返回结果的场景。

1.4. 使用场景

• 用于响应用户的输入事件、点击事件等交互，或者需要执行某些即时操作。
• 适用于没有缓存需求、每次都需要重新计算的场景。

---

2. 计算属性（Computed）

2.1. 是什么

计算属性（computed）是基于 Vue 实例中的响应式数据计算得来的属性。它的计算结果会被缓存，只有当它依赖的响应式数据发生变化时，计算属性才会重新计算。这使得计算属性非常适合用于基于数据的计算，并且能有效提升性能。

2.2. 怎么用

计算属性通过 Vue 实例中的 computed 选项定义，并像普通属性一样在模板中使用。你可以在 computed 中定义计算属性，Vue 会自动追踪它们依赖的数据，并在数据变化时重新计算。

示例：

new Vue({el: '#app',data: {firstName: 'John',lastName: 'Doe'},computed: {fullName() {return this.firstName + ' ' + this.lastName;}}
});

<div id="app"><p>{{ fullName }}</p> <!-- 使用计算属性 fullName -->
</div>

2.3. 特点

• 缓存机制：计算属性的值会缓存，只有当它的依赖（如 firstName 和 lastName）发生变化时，才会重新计算。若依赖数据没有变化，返回的值是缓存的。
• 自动更新：当依赖的数据发生变化时，计算属性会自动重新计算。
• 适合用于组合值：如合并字符串、计算价格、格式化日期等。
• 支持 getter 和 setter：计算属性不仅可以是 getter（获取值），还可以是 setter（设置值）。通过 setter 可以修改依赖的属性。

computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1] || '';}}
}

2.4. 使用场景

• 用于依赖其他响应式数据进行计算的场景，如组合数据、处理计算属性等。
• 适合需要缓存计算结果的场景，避免每次访问都重新计算。

---

3. 侦听器（Watch）

3.1. 是什么

侦听器（watch）用于观察 Vue 实例中的数据变化，并在数据变化时执行某些操作。侦听器非常适合用来处理需要执行副作用的操作，如异步请求、数据持久化或复杂逻辑的处理。

3.2. 怎么用

侦听器通过 Vue 实例中的 watch 选项定义，你可以指定一个数据属性或计算属性来监听，并在该属性发生变化时执行回调。

示例：

new Vue({el: '#app',data: {firstName: 'John',lastName: 'Doe'},watch: {firstName(newVal, oldVal) {console.log(`First name changed from ${oldVal} to ${newVal}`);}}
});

<div id="app"><input v-model="firstName" />
</div>

3.3. 特点

• 每次数据变化都会触发：侦听器会在目标数据发生变化时立即触发回调函数。
• 适用于副作用处理：侦听器通常用于处理异步操作或执行数据持久化等副作用操作。
• 可以监听复杂数据结构：侦听器不仅支持基本数据类型，还支持监听数组和对象的变化，甚至可以进行深度监听。
• 异步执行：侦听器的回调是异步执行的，不会阻塞页面的渲染。

watch: {// 深度监听对象user: {handler(newValue, oldValue) {console.log('User object changed');},deep: true}
}

3.4. 使用场景

• 需要对数据变化进行副作用处理时，如发起异步请求、保存到本地存储、触发动画等。
• 适合监听复杂数据变化（如对象或数组的变化），并在变化时执行逻辑。

---

4. 计算属性、侦听器和方法的对比

特性	方法（methods）	计算属性（computed）	侦听器（watch）
缓存机制	不缓存，每次调用都会执行	有缓存，只有依赖的数据变化时才会重新计算	没有缓存，每次数据变化都会触发回调
适用场景	响应事件和执行逻辑	基于数据的计算与组合	监听数据变化并处理副作用操作
性能	性能较差，每次调用都会重新计算	性能较好，缓存计算结果	性能相对较差，依赖于回调逻辑的复杂度
是否适合副作用	适合处理事件和逻辑操作	不适合，计算属性不应包含副作用	适合用于执行副作用（如 API 请求、保存数据等）
触发时机	每次调用都会触发	依赖的数据变化时触发	数据变化时触发
使用复杂度	简单直观，适合处理简单的逻辑	简单，适用于依赖数据的计算	适用于复杂数据监听及副作用处理

---

5. 总结

• 方法（Methods）：适用于事件处理、用户交互和即时执行逻辑。每次调用都会重新执行，性能相对较低，不适合用于数据计算和组合。

• 计算属性（Computed）：适用于基于其他数据计算并缓存的场景。能够避免不必要的重复计算，适合计算组合数据或派生数据。

• 侦听器（Watch）：适用于数据变化时执行副作用操作，如异步请求、数据持久化等。可以监听对象和数组的变化，适合处理复杂的逻辑。

• 总结选择：

  • 如果需要基于数据计算并缓存结果，使用计算属性。
  • 如果要响应事件或执行即时操作，使用方法。
  • 如果需要监听数据