【vue教程】四. Vue 计算属性和侦听器

在Vue中，计算属性和侦听器分别用来处理依赖响应式数据的计算结果和在数据变化时执行的操作。

1. 计算属性 (computed):

   计算属性是基于响应式依赖进行缓存的。只在相关依赖发生变化时它们才会重新求值。

// 在Vue组件中使用计算属性
export default {
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    // 计算属性 fullName
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

2. 侦听器 (watch):

   侦听器用于观察Vue实例上的数据变动，每当依赖的数据变化时，都会执行特定的函数。

// 在Vue组件中使用侦听器
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    // 监听 count 的变化
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

在上述例子中，计算属性fullName会在firstName或lastName改变时自动更新，而侦听器count会在count的值发生变化时执行。