加入v-if后Dom响应失效

[yee94]

<template>
    <div class = "overlook-setting">
        <div v-if = "isShow">
            {{testMobx.data}}
        </div>

    </div>
</template>
<script>
  // import { Component, Vue } from 'vue-property-decorator'
  import { observable, action } from 'mobx'
  import { observer } from 'mobx-vue'

  class TestMobx {
    constructor() {
    }

    @observable data = {
      x: 0,
      y: 0,
      z: 0,
    }

    @action.bound setData() {
      this.data.x++
    }
  }

  let TestClass = new TestMobx()
  setTimeout(() => {
    TestClass.setData()

  }, 3000)

  export default observer({
    data() {
      return {
        isShow: false,
        testMobx: TestClass
      }
    },
    mounted() {
      this.isShow = true
    }
  })
</script>
<style lang = "less" scoped>
    .overlook-setting {
    }
</style>

当模板渲染加入v-if后，Dom响应会失效。

页面理论应该在2000后显示 {x:1} ,可是一直会停在{x:0}

[kuitos]

That was because isShow is not an mobx observable and we don't track the updating by vue watchers.

To solve that U can move isShow to TestMobx as an observable.

BTW, we suggest using mobx to manage your state, since you had chosen mobx😄.

[kuitos]

Fixed and released v2.0.4 @xiaobebe

Even so, we still suggest using mobx to manage app state rather than vue native data, as best practice.

[yee94]

tku ！！