vue2中的计算属性

1.什么是计算属性？
在 Vue.js 中，计算属性是一种依赖于 Vue 实例数据的动态属性。计算属性的值是根据它们的依赖动态计算而来的，只要依赖的响应式数据发生改变，计算属性就会重新计算其值。计算属性的优势在于可以将复杂的逻辑封装在属性中，让模板更加清晰简洁。

2.如何定义计算属性？
在 Vue 组件中，你可以通过 computed 选项来定义计算属性。在 computed 对象中，你可以定义一个或多个计算属性，每个属性都对应一个计算函数，该函数会在其依赖的响应式数据发生变化时被调用，返回计算结果。

// Vue 组件示例

Vue.component('example', {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  computed: {
    reversedMessage() {
      // 计算属性，返回反转后的消息
      return this.message.split('').reverse().join('');
    },
  },
});

计算属性的缓存机制
Vue.js 会缓存计算属性的值，只在其依赖发生改变时才会重新计算，这样可以提高性能并减少不必要的计算。只有在依赖的响应式数据发生改变时，才会触发计算属性的重新计算。

计算属性与方法的区别
虽然在某些情况下计算属性和方法都可以实现相同的功能，但它们在使用时有一些区别。计算属性是基于它们的依赖缓存的，只有在相关依赖发生改变时才会重新计算；而方法在每次调用时都会重新执行函数体。
3.methods与computed的区别

1. 执行时机：
   methods： 定义的方法在每次被调用时都会执行函数体。无论调用方法的次数和方法内部的逻辑如何，都会重新执行方法的函数体。

computed： 定义的计算属性只有在其依赖的响应式数据发生改变时才会重新计算其值。计算属性会缓存计算结果，只有在相关依赖发生变化时才会重新计算，之后再次访问该计算属性时，会直接返回缓存的结果。

2. 用途：
   methods： 通常用于处理触发式事件，比如点击事件、输入事件等。也可以在其中进行一些复杂的数据操作和业务逻辑处理。

computed： 适合用于基于响应式数据进行复杂的数据计算和转换。常用于模板中需要动态显示的数据，可以将复杂的逻辑封装在计算属性中，使模板更加简洁易读。

3. 语法：
   methods： 使用普通的函数语法来定义方法。

methods: {
  methodName() {
    // 方法体
  }
}

computed： 使用带有 get 和 set 方法的对象语法来定义计算属性。

computed: {
  computedPropertyName: {
    get() {
      // 计算属性的计算逻辑
    },
    set(value) {
      // 计算属性的赋值逻辑（可选）
    }
  }
}

}
4. 缓存机制：
methods： 每次调用方法都会重新执行方法体，不会缓存结果。

computed： 计算属性会根据其依赖的响应式数据进行缓存，只有在相关依赖发生变化时才会重新计算。