javascript - vuejs(3) 从一个自变化的类更新视图

Question

基本上我想让我的班级（转换器）处理自己的状态，并在它想要触发 Vue 时根据公共字段更新所有内容。

当我使用一种方法时，它确实有效，但是计时器不起作用

从 Vue 来源来看，我似乎可以通过像这样运行触发器功能来实现这一点

trigger(target, \"set\" /* SET */, key, value, oldValue);

https://unpkg.com/vue@3.2.19/dist/vue.global.js #875

但是触发功能不是从vue导出的，似乎也不是手动使用的，还有其他方法吗？或者唯一的方法是从 app2 对象一直设置到深处？

class changer {
  constructor() {
    this.value = 0
    setInterval(() => {
      console.log(this,this.value)
      this.value++
    }, 2500)
  }

  changeme() {
    this.value++
      //tell vue to trigger values dependicies
  }


}

var c = new changer();

c.changeme();
console.log(c);
var m = new Map();
m.set("a", 1);
m.set("b", 1);
console.log(m);

var Counter = {
  data() {
    return {
      counter: 0,
      m,
      c
    }
  },

}

var app = Vue.createApp(Counter);
var app2 = app.mount('#counter')

<script src="https://unpkg.com/vue@next"></script>

<div id="counter">
  Counter: {{ counter }}
  <span v-for="i in  m">{{i}}</span>
  <button @click="m.set('a',2)">Change Map</button>
  <span>
    {{c}}
    <button @click="c.changeme()">Change with method</button>
    <button @click="c.value++">Change with set</button>
  </span>
</div>

标签： javascriptvue.js