vue计算属性get，set的区别

Vue.js中的计算属性（Computed Properties）是用来响应式地基于其他数据动态生成新属性的一种特性。它们有`get`和`set`两个关键部分：

1. `get`：这是计算属性的主要部分，当依赖的数据发生变化时，它会被自动调用。当你在模板中使用计算属性时，实际上是调用了这个函数。`get`函数内部通常包含一些计算逻辑，返回的结果将被缓存起来，并作为属性展示给视图。

data() {
  return {
    a: 1,
    b: 2
  }
},
computed: {
  // 计算属性aPlusB
  aPlusB() {
    return this.a + this.b;
  }
}

在这个例子中，当你改变`a`或`b`的值时，`aPlusB`会自动更新。

2. `set`（可选）：它是`defineProperty`API的一部分，用于在观察到依赖项变化时通知视图更新。如果你的计算属性需要基于外部状态的变化做出响应（比如来自用户输入的实时计算），并且希望对这种更改进行处理，可以在`get`方法中添加`setter`。然而，在大部分简单场景下，Vue会自动管理依赖并触发`get`，所以`set`往往并不常见。

data() {
  return {
    a: 1,
    b: 2
  },
  computed: {
    aPlusB: {
      get() {
        return this.a + this.b;
      },
      set(newSum) {
        let [newA, newB] = newSum.split('-');
        this.a = parseInt(newA);
        this.b = parseInt(newB);
      }
    }
  }
}

这里设置了`set`函数来处理`aPlusB`的新值，如通过`this.aPlusB = '5-3';`形式设置。