Vue2（计算属性与侦听器）

计算属性和侦听器

计算属性

计算属性（Computed Properties）是一种特殊的属性，它们基于组件的响应式数据动态计算出一个新的值，并缓存这个值以便高效复用。

没有计算属性时，我们会这样写--模板过重且难以维护

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

使用计算属性后

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

  data(){
   return{
    message: 'Hello'
  }
  },
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

 侦听器

观察和监听Vue实例上数据的变化，并根据这些变化来执行特定的操作或函数。

watch简写

 watch: {
    // 监听 question 的变化
    question(newVal, oldVal) {
      // 当 question 发生变化时执行的逻辑
      console.log(`Question changed from ${oldVal} to ${newVal}`);
      // 这里可以执行异步操作等
    }
  }

//或者直接执行this.$watch方法
 mounted() {
    this.$watch('question', (newVal, oldVal) => {
      // 当 question 发生变化时执行的逻辑
      console.log(`Question changed from ${oldVal} to ${newVal}`);
    });
  }

高级用法：

深度观察：当需要观察一个对象或数组内部值的变化时，可以使用 deep: true 选项。

立即执行：使用 immediate: true 选项，可以在 watch 被创建后立即执行回调函数，而不是等待数据变化。

 watch: {
    // 使用字符串形式的键名来观察某个数据属性
    // 开启深度观察
    'someObject': {
      handler(newVal, oldVal) {
        console.log('someObject 改变了:', newVal);
        // 这里是当someObject或其子属性变化时执行的代码
      },
      deep: true, // 深度观察
      immediate: true // 立即执行
    }
  },

Vue2相对于Vue3所存在的缺陷：Vue使用基于ES5的Object.defineProperty方法来实现其响应式系统。

Object.defineProperty方法主要用于将Vue实例的data选项中的顶层属性转换为getter/setter，为了解决这个问题，Vue提供了Vue.set（或在组件内部使用this.$set）方法来确保对象属性的添加或修改能够触发视图更新。

<template>
  <div>
    <p>对象 a 的值: {{ someObject.a }}</p>
    <p>对象 b 的 c 的值: {{ someObject.b.c }}</p>
    <button @click="changeValue">更改值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someObject: {
        a: 1,
        b: {
          c: 2
        }
      }
    };
  },
  watch: {
    // 使用字符串形式的键名来观察某个数据属性
    // 开启深度观察
    'someObject': {
      handler(newVal, oldVal) {
        console.log('someObject 改变了:', newVal);
        // 这里是当someObject或其子属性变化时执行的代码
      },
      deep: true, // 深度观察
      immediate: true // 立即执行
    }
  },
  methods: {
    changeValue() {
      // 更改someObject的值来触发watch
      this.$set(this.someObject.b, 'c', this.someObject.b.c + 1);
      // 注意：如果你只是简单地赋值，如 this.someObject.b.c = ...，
      // Vue 可能无法检测到嵌套对象的变化，除非使用 Vue.set 或 this.$set
    }
  }
};
</script>

computed与watch之间的区别

缓存机制：

computed：具有缓存机制。只有当计算属性所依赖的数据发生变化时，才会重新计算并更新缓存结果。如果依赖的数据没有变化，则直接返回缓存的结果。

watch：没有缓存机制。每次监听的数据发生变化时，都会执行回调函数，不会缓存结果。

异步支持：

computed：不支持异步操作。

watch：支持异步操作。

性能：

computed：由于具有缓存机制，只有当依赖的数据发生变化时才会重新计算，因此在处理大量数据和复杂逻辑时，可以显著提高性能。

watch：没有缓存机制，每次数据变化都会触发响应的操作，可能在某些情况下导致性能问题。