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

【问题标题】：How to skip rerendering a reactive component如何跳过重新渲染反应组件
【发布时间】：2017-07-05 15:10:58
【问题描述】：

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

我怎样才能做到这一点？

【问题讨论】：

npmjs.com/package/vue-nonreactive，但正如描述中所述，“如果您正在使用它，您可能需要重新考虑您的数据模型。”或者试试Object.freeze()。
嗯？你想观察什么变化？变量？
@HBensiali 一个属性
喜欢数据：{'property_name': 'my_name'} ?您想查看 property_name 的更改
@HBensiali 不是数据，而是 props 并且不想在更改时呈现

【解决方案1】：

您想要达到的目标并不完全清楚，但这里是您所要求的一种解释。该组件接受一个 prop 作为 value 和一个 prop 来指示它是否已暂停。它有一个数据项来缓存它的值和一个计算值，只有在没有暂停时才会将该缓存值更新为 prop 值；计算的总是返回缓存的值。

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

【讨论】：

【解决方案2】：

不确定你的意思，但 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

【讨论】：