反応性成分の再レンダリングをスキップする方法

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

それはあなたが達成しようとしているものを完全には明らかではないのですが、ここであなたが求めているものの一つの解釈です。コンポーネントは値の小道具を取り、一時停止されているかどうかを示す1つの値をとります。それは、その値をキャッシュするデータ項目と、そのキャッシュされた値を一時停止していない場合にのみ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>