Vuejs Es6 类反应性

Question

我试图在 vuejs 中拥有一个与 es6 类关联的计算属性。我的 Vue 实例如下所示：

...
props: ['customClass'],
computed: {
    localClass: {
         get() {
             return this.customClass
         },
         set (value) {
             console.log("changed")
         }
     }
 }
 ...

我的班级看起来像这样

class CustomClass {
    constructor () {
        this.selected = false
    }
}

如果我尝试做这样的事情：

this.localClass.selected = true

但是从来没有调用过二传手，就像反应性已经丢失一样，我不明白为什么。

我也尝试：

Vue.set(this.localClass, 'selected', true)

我将 customClass 作为 prop 传递，但即使直接在组件中创建新实例也不会改变结果。

在 vuejs 文档中，我不记得有一节讨论过 es6 类中的反应性问题，所以我想知道是否有人知道为什么以及如何使我的类具有反应性。

提前致谢

Answer 1

计算属性（例如 ）的 settermyComputedProperty会在您分配给该属性（例如this.myComputedProperty = {something: 'else'}.

您可能正在寻找的是一个watcher，更具体地说，是一个带有 的 watcherdeep: true，例如：

watch: {
  localClass: {
    deep: true,
    handler() {
      out.innerHTML += "watched!";
    }
  }
},

下面演示。

watch: {
  localClass: {
    deep: true,
    handler() {
      out.innerHTML += "watched!";
    }
  }
},

class CustomClass {
  constructor() {
    this.selected = false
  }
}
Vue.component('custom', {
  template: '#custom',
  props: ['customClass'],
  computed: {
    localClass: {
      get() {
        return this.customClass
      },
      set(value) {
        out.innerHTML += "changed!\n";
      }
    }
  },
  watch: {
    localClass: {
      deep: true,
      handler() {
        out.innerHTML += "watched!\n";
      }
    }
  },
  methods: {
    assignToSelected() {
      this.localClass.selected = true
    },
    assignToLocalClass() {
      this.localClass = {
        selected: true
      }
    }
  }
});
new Vue({
  el: '#app',
  data: {
    test: new CustomClass()
  },
})

#out { background: black; color: gray; }
span { font-size: x-small; font-family: verdana }