如何将Vue.js中的computed计算属性替换为listener监听器

修改逻辑很简单：计算属性是依赖更新时自动返回新值，切换为监听器的话只需先在data中声明存储input的响应式变量，再监听所有影响input值的依赖项，依赖变化时手动更新input的值即可。

注意：你原代码中computed返回的input里label和description写死为空白值，属于明显的业务逻辑笔误，下面的实现会按正常场景同步data中的label和description到input，如果你确实要保留为空，删掉对应赋值语句即可。

完整修改后代码 #

import { MUTATION_entreePlanningCreate } from "./graphql/mutations";

export default {
  name: "EntreePlanningForm",
  data: function () {
    return {
      dates: ["", ""],
      datesRules: [(v) => !!v || "Veuillez selectionner une date"],
      label: "",
      labelRules: [
        (v) => v.length < 20 || "Le champ doit comporter moin de 20 caractère",
      ],
      description: "",
      // 新增input初始值，结构和原computed返回值保持一致
      input: {
        dateDebut: "",
        dateFin: "",
        label: "",
        description: "",
      }
    };
  },
  watch: {
    // 监听所有input的依赖项，任意变化就更新input值
    dates: {
      handler(newVal) {
        this.input.dateDebut = newVal[0]
        this.input.dateFin = newVal[1]
      },
      // 深度监听数组内部值变化
      deep: true,
      // 组件初始化就执行一次赋值，和computed初始行为对齐
      immediate: true
    },
    label(newVal) {
      this.input.label = newVal
    },
    description(newVal) {
      this.input.description = newVal
    }
  },
  methods: {
    envoyer: function () {
      if (this.$refs.form.validate()) {
        this.$apollo
          .mutate({
            mutation: MUTATION_entreePlanningCreate,
            variables: {
              input: this.input,
            },
          })
          .then((data) => {
            console.log(data);
          });
      }
    },
  },
  // 删掉原来的computed.input配置
};

关键修改点说明 #

• 新增data.input字段：用来存储原计算属性返回的值，保持响应式特性
• 新增watch配置：
  • 对dates开启deep: true深度监听，确保数组内部元素变化能触发更新
  • 监听项加immediate: true可以保证组件初始化时就完成首次赋值，和原computed的行为完全对齐，示例只给dates加是因为初始化时label和description默认是空，和初始input值一致，你可以根据自己的需求调整
  • 每次依赖变化时手动给input的对应属性赋值
• 原有业务逻辑无需改动：envoyer方法中调用this.input的逻辑完全不用修改，可正常运行

如果要完全对齐你原computed的逻辑（input的label和description永远为空），只需删掉watch中的label和description监听项即可。

内容的提问来源于stack exchange，提问作者Juno-44