Vue2 手表设置不工作

Question

我有一个简单的 Vue 应用程序，它应该在您单击 "Add to Set" 按钮时向集合添加一个数字 --

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);
    }
  }
});

为什么 watch 没有在控制台中记录任何内容？

Answer 1

在 Set 上使用 .values() 方法保存并重新 Set 设置 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>

Answer 2

Vue 添加了 special handling for Arrays，但不用于集合。因此，Vue 不会自动检测对 Set 成员资格的更改。不过你可以强制更新

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

Answer 3

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

观察变化

Vue2 手表设置不工作

Vue2 watch Set Not Working

javascript

vuejs2

codepen