Vue - 计算属性 getter 和 setter

给第三方组件上的 v-model 传递一个响应式数据 A，在数据 A 更改时想要做更多附加的任务，可以通过 watch 函数实现。

还有一种做法，给计算属性写 getter 和 setter，通过它们可以做读/写时的额外代码。

file:[Demo.vue]
const computeCabinetWidth = computed({
  get() {
    return localSetting.value.cabinet.width;
  },
  set(value) {
    disabled.value = inspect();
    localSetting.value.cabinet.width = value;
    LiteConfig.eleHtml.style.setProperty(LiteCssVars.cabinetWidth, value + "rem");
  }
});

const computeContentWidth = computed({
  get() {
    return localSetting.value.content.width;
  },
  set(value) {
    disabled.value = inspect();
    localSetting.value.content.width = value;
    LiteConfig.eleHtml.style.setProperty(LiteCssVars.contentWidth, value + "vw");
  }
});

file:[Demo.vue]
<el-collapse-item title="宽度设置">
  <div class="mb-4">
    <div class="mb-2">设置陈列柜宽度</div>
    <el-slider :min="13" :step="0.5" :max="20" v-model="computeCabinetWidth" size="small" />
  </div>
  <div>
    <div class="mb-2">设置中间内容宽度</div>
    <el-slider :disabled="disabled" :min="50" :step="1" :max="60" v-model="computeContentWidth" size="small" />
  </div>
</el-collapse-item>

把计算属性传递给 v-model，当数据发生改变之后，即更新数据走计算属性的 setter 函数，做一些处理工作。