阐述Vue 中 computed 和 methods 的区别？

八股文_Vue面试题 0 54

参考回答

computed 和 methods 都可以用来处理 Vue 组件中的数据，但它们有显著的区别：

computed：计算属性是基于其依赖的数据进行缓存的，只有当依赖的数据发生变化时，计算属性才会重新计算，否则会返回缓存的结果。适用于那些基于响应式数据计算出来的值。
methods：方法是每次调用时都会执行的，且没有缓存机制。每次调用方法时，都会重新执行方法中的逻辑。适用于那些不需要缓存的操作，或需要每次都进行重新计算的情况。

详细讲解与拓展

缓存机制：
- computed：计算属性会根据其依赖的数据自动缓存，只有当依赖的响应式数据发生变化时，计算属性才会重新计算。如果数据没有变化，访问计算属性时会直接返回之前缓存的结果。
- methods：每次访问方法时，都会重新执行方法中的逻辑。方法没有缓存机制，即使数据没有变化，每次调用都会执行函数的内容。
示例：
```
data() {
 return {
   firstName: 'John',
   lastName: 'Doe'
 };
},
computed: {
 fullName() {
   return this.firstName + ' ' + this.lastName;
 }
},
methods: {
 fullNameMethod() {
   return this.firstName + ' ' + this.lastName;
 }
}
```
如果你访问 fullName 计算属性，只有在 firstName 或 lastName 改变时，它才会重新计算；而每次调用 fullNameMethod 方法时，都会重新执行函数体，计算并返回结果。
适用场景：
- computed：适合用于依赖多个数据来计算一个值，并且这个值不会频繁变动的场景。它的缓存机制非常适合高效计算动态值，并且避免了每次访问时都进行昂贵的计算。
- methods：适合用于需要每次都执行逻辑，或不依赖于 Vue 的响应式系统进行缓存的操作。方法适用于需要执行副作用的逻辑，或者每次都需要重新计算的情况。
例如：
- 计算属性适合在模板中使用，避免重复计算，如：
  “`html
  </li>
  </ul></li>
  </ol>
  
  <div>{{ fullName }}</div>
  
  <pre><code> “`
  每次模板重新渲染时，`fullName` 会根据 `firstName` 和 `lastName` 的变化计算并显示结果。
  - 方法适合于响应事件或处理复杂的逻辑，像事件处理器、提交表单等：
    “`html
    <button @click="fullNameMethod">Get Full Name</button>
    “`
  1. 性能差异：
    - computed：由于其缓存机制，计算属性在依赖的数据不发生变化时，可以避免重复计算，因此对于复杂的计算是一个性能优化的手段。
    - methods：每次都重新执行，因此当你多次访问同一个方法时，性能会较差，尤其是当方法内的计算比较复杂时。
  2. 使用场景举例：
    - computed：计算属性通常用于基于现有的数据计算新的值，并且这些值的计算结果可以被缓存：
```
computed: {
reversedName() {
 return this.firstName.split('').reverse().join('');
}
}
```
      只有在 `firstName` 数据发生变化时，`reversedName` 才会重新计算。
  - methods：方法适合于那些不依赖于响应式数据计算，或需要每次都执行的操作：
    “`js
    methods: {
    fetchData() {
    // 每次调用都要执行的逻辑
    axios.get('/api/data').then(response => {
    this.data = response.data;
    });
    }
    }
    “`
  1. 更新时机：
    - computed：计算属性的值会在它所依赖的数据发生变化时自动更新。Vue 会自动追踪计算属性依赖的数据。
    - methods：方法每次被调用时都会执行，依赖的数据发生变化时，调用方法的逻辑不会自动更新，除非显式地调用方法。
  总结：
  - computed：具有缓存机制，适合用于计算基于响应式数据的值，性能更优。
  - methods：没有缓存机制，适合于需要每次执行的逻辑，适用于事件处理、提交表单等场景。
  两者的主要区别是计算属性通过缓存提高性能，而方法则更灵活，每次都会重新执行，适用于不需要缓存的动态逻辑。
  
  帅地训练营会员

参考回答

详细讲解与拓展

总结：

发表评论 取消回复

发表评论取消回复