<p dir="auto"><strong>Update:</strong><br>
If anyone ends up needing this functionality, I've released it as <a href="https://github.com/rpkilby/vue-nonreactive">vue-nonreactive</a> with the appropriate admonitions and everything.</p>
<hr>
<p dir="auto">We have some non-plain models where we need to disable Vue's observation and walking. An example is a resource model that has access to a cache so that it can lookup related resources. This causes all of the objects in the cache to become watched (probably inefficient), as well as some additional interactions with other code. Currently, we get around this by setting a dummy Observer on the cache. Something similar to...</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import get from 'http';
import Resource from 'resource';


new Vue({
    data: { instance: {}, },
    ready() { this.fetch(); },

    methods: {
        fetch() {
            const Observer = Object.getPrototypeOf(this.instance.__ob__).constructor;

            get('/api/frobs')
            .then(function(data) {
                // initialize Resource w/ JSON document
                const resource = new Resource(data);

                // Protect cache with dummy observer
                resource.cache.__ob__ = new Observer({});

                this.instance = resource;
            });
        },
    },
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">get</span> <span class="pl-k">from</span> <span class="pl-s">'http'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Resource</span> <span class="pl-k">from</span> <span class="pl-s">'resource'</span><span class="pl-kos">;</span>


<span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">data</span>: <span class="pl-kos">{</span> <span class="pl-c1">instance</span>: <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">ready</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">fetch</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>

    <span class="pl-c1">methods</span>: <span class="pl-kos">{</span>
        <span class="pl-en">fetch</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">const</span> <span class="pl-v">Observer</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">getPrototypeOf</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">instance</span><span class="pl-kos">.</span><span class="pl-c1">__ob__</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">constructor</span><span class="pl-kos">;</span>

            <span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">'/api/frobs'</span><span class="pl-kos">)</span>
            <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-c">// initialize Resource w/ JSON document</span>
                <span class="pl-k">const</span> <span class="pl-s1">resource</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Resource</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-c">// Protect cache with dummy observer</span>
                <span class="pl-s1">resource</span><span class="pl-kos">.</span><span class="pl-c1">cache</span><span class="pl-kos">.</span><span class="pl-c1">__ob__</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Observer</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">instance</span> <span class="pl-c1">=</span> <span class="pl-s1">resource</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This does work, but</p>
<ul dir="auto">
<li>relies on vue's internals</li>
<li>requires an already observed object since we cannot import the <code class="notranslate">Observer</code> class directly.</li>
</ul>
<p dir="auto"><strong>Proposal:</strong><br>
Add an official method for explicitly disabling Vue's observation/walking. eg, something like...</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const someThing = {
  nestedThing: {},
};

// make entire object non-reactive
Vue.nonreactive(someThing);

// make nested object non-reactive
Vue.nonreactive(someThing.nestedThing);
vm.$set('key.path', someThing);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">someThing</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">nestedThing</span>: <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">// make entire object non-reactive</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">nonreactive</span><span class="pl-kos">(</span><span class="pl-s1">someThing</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// make nested object non-reactive</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">nonreactive</span><span class="pl-kos">(</span><span class="pl-s1">someThing</span><span class="pl-kos">.</span><span class="pl-c1">nestedThing</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">vm</span><span class="pl-kos">.</span><span class="pl-en">$set</span><span class="pl-kos">(</span><span class="pl-s">'key.path'</span><span class="pl-kos">,</span> <span class="pl-s1">someThing</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Considerations:</p>
<ul dir="auto">
<li>
<p dir="auto">What should happen if a user set a reactive key path to an non-reactive object? Should vue warn the user? eg,</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="vm.$set('a', Vue.nonreactive({});

// different from..
vm.$set('a', {
    someKey: Vue.nonreactive({}),
});"><pre class="notranslate"><span class="pl-s1">vm</span><span class="pl-kos">.</span><span class="pl-en">$set</span><span class="pl-kos">(</span><span class="pl-s">'a'</span><span class="pl-kos">,</span> <span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">nonreactive</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span><span class="pl-kos">;</span>

<span class="pl-c">// different from..</span>
<span class="pl-s1">vm</span><span class="pl-kos">.</span><span class="pl-en">$set</span><span class="pl-kos">(</span><span class="pl-s">'a'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-c1">someKey</span>: <span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">nonreactive</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
</li>
<li>
<p dir="auto">Should an already reactive object warn the user if attempted to be made non-reactive? eg,</p>
</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// error
Vue.nonreactive(vm.$data.a)

// valid
Vue.nonreactive(_.clone(vm.$data.a));"><pre class="notranslate"><span class="pl-c">// error</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">nonreactive</span><span class="pl-kos">(</span><span class="pl-s1">vm</span><span class="pl-kos">.</span><span class="pl-c1">$data</span><span class="pl-kos">.</span><span class="pl-c1">a</span><span class="pl-kos">)</span>

<span class="pl-c">// valid</span>
<span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">nonreactive</span><span class="pl-kos">(</span><span class="pl-s1">_</span><span class="pl-kos">.</span><span class="pl-en">clone</span><span class="pl-kos">(</span><span class="pl-s1">vm</span><span class="pl-kos">.</span><span class="pl-c1">$data</span><span class="pl-kos">.</span><span class="pl-c1">a</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">for example,there is a row component which includes some cols,i wanna the cols have transition effect,and give row some props.But ,the props i wrote does no effect on the row component.and if i use 'row &gt; transtion-group' combination, some css will lose there effect</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">&lt;transtion-group type=row :option={row's props}&gt;</p>