Vue.js 计算属性：高效管理数据和组件通信

2024-03-11 23:56:43

在 Vue.js 中，计算属性是一个强大的工具，可让你基于其他属性的值派生出新的属性。它与方法不同，因为当依赖项发生变化时，计算属性会自动更新，而方法只有在被显式调用时才运行。

在数据中使用计算属性

虽然计算属性非常有用，但你不能在 data 对象中使用它们。相反，计算属性必须定义在 computed 对象中，如下所示：

const vm = new Vue({
  data() {
    return {
      // 这里定义的是普通数据属性
      computedData: 0
    }
  },

  computed: {
    myComputed() {
      // 这里可以访问和修改 computedData
      return this.computedData * 2
    }
  }
})

在这个例子中，myComputed 是一个计算属性，它会根据 computedData 的值自动更新。

通过总线传递计算属性

事件总线是 Vue 实例，允许组件之间进行通信，即使它们没有直接的父子关系。如果你希望通过总线传递计算属性，可以使用 $emit 方法，如下所示：

const vm = new Vue({
  ...

  methods: {
    emitComputedProperty() {
      this.$emit('my-computed-property', this.myComputed)
    }
  }
})

在另一个组件中，使用 $on 方法监听事件：

const otherVm = new Vue({
  ...

  mounted() {
    vm.$on('my-computed-property', this.handleComputedProperty)
  },

  beforeDestroy() {
    // 组件销毁前移除监听器
    vm.$off('my-computed-property', this.handleComputedProperty)
  },

  methods: {
    handleComputedProperty(value) {
      this.receivedComputedProperty = value
    }
  }
})