Vue.js中指定Prop的计算属性Setter无响应问题求助

嘿，我一眼就瞅出你代码里的问题啦！你的计算属性offer写法有两个关键错误，才导致了输入延迟、无响应式的情况：

问题分析 #

1. Getter每次重新拷贝，丢失修改状态：你在getter里每次都返回JSON.parse(JSON.stringify(this.propOffer))，这意味着每次访问offer都会从原始prop重新深拷贝一份——不管你之前改了什么，下次获取offer时都会被打回原形，根本没法保存修改后的内容。
2. Setter完全无效：你的setter函数里只写了this.offer，既没接收输入的新值，也没更新任何响应式状态，相当于啥也没做，自然不会触发视图更新。

解决方案 #

方案1：用本地Data存储副本（推荐） #

既然你是要复制prop的副本并在本地修改，最直接的方式就是把prop拷贝到组件的data里，这样v-model绑定会完全正常：

export default {
  props: ['propOffer'],
  data() {
    return {
      // 初始化时深拷贝prop到本地响应式变量
      offer: JSON.parse(JSON.stringify(this.propOffer))
    }
  }
}

这样绑定<v-text-field v-model="offer.title">就会即时响应输入，完全没有延迟，因为offer是组件本地的响应式数据，修改直接生效。

方案2：修正计算属性的写法（适合需要同步父组件的场景） #

如果你一定要用计算属性（比如需要把修改后的值同步回父组件），那需要用一个本地变量来存储修改后的状态，同时正确实现setter：

export default {
  props: ['propOffer'],
  data() {
    return {
      // 用本地变量存储修改后的状态
      _offer: null
    }
  },
  created() {
    // 初始化时从prop拷贝值到本地变量
    this._offer = JSON.parse(JSON.stringify(this.propOffer))
  },
  computed: {
    offer: {
      get() {
        // 从本地变量取值，而不是每次都重新拷贝prop
        return this._offer
      },
      set(newValue) {
        // 接收输入的新值，更新本地变量
        this._offer = newValue
        // 如果需要把修改后的值同步给父组件，触发emit事件
        // this.$emit('update:propOffer', newValue)
      }
    }
  }
}

这样修改后，计算属性的getter会返回本地修改后的状态，setter会正确更新状态，v-model就能即时响应了。

内容的提问来源于stack exchange，提问作者gileneusz