如何跳过重新呈现反应组件

时间:2017-07-05 15:10:58

标签: vue.js vuejs2 vue-component

我有一个具有反应特性的组件。 我希望更改属性,并希望知道何时使用任何可能的事件进行更改但我不想重新呈现DOM。

我怎样才能做到这一点?

2 个答案:

答案 0 :(得分:1)

目前还不完全清楚你想要达到的目标,但这是对你所要求的一种解释。该组件获取值的prop,以及表示是否暂停的组件。它有一个数据项来缓存它的值,并且只有在没有暂停时才会将缓存的值更新为prop值; computed总是返回缓存的值。

结果是你可以在组件上暂停DOM更新。当您取消暂停时,它会更新并保持更新。

new Vue({
  el: '#app',
  data: {
    value: 'red',
    paused: false
  },
  components: {
    cPausable: {
      template: '<div>{{proxyValue}}, {{paused}}</div>',
      data() {
        return {
          cachedValue: this.value
        }
      },
      props: {
        paused: {
          type: Boolean,
          default: false
        },
        value: {}
      },
      computed: {
        proxyValue() {
          if (!this.paused) {
            this.cachedValue = this.value;
          }
          return this.cachedValue;
        }
      }
    }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <input v-model="value">
  <input type="checkbox" v-model="paused">
  <c-pausable :value="value" :paused="paused"></c-pausable>
</div>

答案 1 :(得分:0)

不确定你的意思,但是vuejs已经有了几个功能来完成这个任务。

socket

https://vuejs.org/v2/guide/computed.html#Watchers