Question

我有一个简单的Vue应用程序，当你点击＆＃34;添加到设置时，它应该为一个Set添加一个数字＆＃34;按钮 -

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添加special handling for Arrays，但不添加套装。因此，Vue不会自动检测设置成员资格的更改。您可以强制更新，但

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

Answer 2

这是因为Vue不支持Set，Map，WeakSet和WeakMap。这是因为浏览器不能很好地支持这些结构。特别是WeakMap。但是......他们决定支持这些结构。也许在版本3中 - 当他们决定放弃对旧浏览器的支持时。因此，现在使用对象，使用Vue.$set()添加属性并使用deep: true监视更改。

Answer 3

使用--on-failure DELETE上的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);
    }
  }
});

Vue2手表设置不起作用

3 个答案: