如何跳过重新渲染反应式组件

Question

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

我怎样才能做到这一点？

Answer 1

不确定你的意思，但 vuejs 已经有几个函数可以做到这一点。

var component_name = new Vue({
     el:'#element_container',
     data: {
         'data_to_be_watched': {'name': 'Abdel', 'surname': 'Sakherdine'}
     },
     watch: {
         'data_to_be_watched.name': function(value){
             //do something with value here
        }
    }
});

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

Answer 2

尚不完全清楚您要实现的目标，但这是对您的要求的一种解释。该组件采用 prop 值和 one 来指示它是否暂停。它有一个数据项来缓存它的值，还有一个计算器，只有在不暂停时才会将该缓存值更新为 prop 值；计算总是 returns 缓存值。

结果是您可以暂停 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>

如何跳过重新渲染反应式组件

How to skip rerendering a reactive component

vue.js

vue-component

vuejs2