Vue2观看设置为不工作(Vue2 watch Set Not Working)

我有一个应该是一个数字添加到组当您单击“添加设置”按钮，一个简单的Vue的应用程序 -

https://codepen.io/jerryji/pen/mKqNvm?editors=1011

<div id="app">
  <input type="number" placeholder="enter a number" v-model="n">
  <button type="button" @click.prevent="addToSet()">Add to Set</button>
</div>

new Vue({
  el: "#app",
  data: {
    n: null,
    nSet: new Set()
  },
  methods: {
    addToSet: function() {
      this.nSet.add(this.n);
      console.log(this.n + ' added to Set');
    }
  },
  watch: {
    nSet: function (newVal, oldVal) {
      console.log(newVal);
    }
  }
});

为什么没有在本表控制台登录？

Answer 1:

Vue公司增加了特殊处理的阵列 ，而不是集。 其结果是，Vue公司不会自动检测对集员。 您可以强制更新，但

  this.nSet.add(this.n);
  this.$forceUpdate();

Answer 2:

这是因为Vue公司不支持设置，地图，WeakSet和WeakMap。 而这是因为浏览器不支持这些结构很好。 特别是WeakMap。 但是......他们决定支持这些结构。 也许在3版本 - 当他们决定放弃对老版本浏览器的支持。 所以，现在使用的一个对象，添加属性Vue.$set()并观察变化在于deep: true 。

Answer 3:

保存和重新Set铃声使用设置.values()方法上Set为我工作，我没有使用$forceUpdate

使用$forceUpdate可能会去虽然更明智的方式。 在一些使用情况在过去，我发现迫使组件更新是有问题的。

 new Vue({ el: "#app", data: { n: null, nSet: new Set() }, methods: { addToSet: function() { let set = this.nSet; let newSet = set.add(this.n) this.nSet = new Set(newSet.values()) } }, watch: { nSet: function (newVal, oldVal) { console.log('newVal', ...newVal); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div id="app"> <input type="number" placeholder="enter a number" v-model="n"> <button type="button" @click.prevent="addToSet()">Add to Set</button> <p>n = {{ n }}</p> </div> 

文章来源: Vue2 watch Set Not Working