<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;test&quot;&gt;
    {{ message }}
    &lt;my-component&gt;&lt;/my-component&gt;
&lt;/div&gt;

&lt;script&gt;
    var MyComponent = Vue.extend({
        template: '&lt;div&gt;A custom component!&lt;/div&gt;',
        data: function () {
            console.log('data');
            return { a: 1 }
        }
    });
    new Vue({
        el: '#test',
        data: {
            message: 'Hello Vue.js!'
        },
        components: {
            'my-component': MyComponent
        }
    });
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;div id="test"&gt;
    {{ message }}
    &lt;my-component&gt;&lt;/my-component&gt;
&lt;/div&gt;

&lt;script&gt;
    var MyComponent = Vue.extend({
        template: '&lt;div&gt;A custom component!&lt;/div&gt;',
        data: function () {
            console.log('data');
            return { a: 1 }
        }
    });
    new Vue({
        el: '#test',
        data: {
            message: 'Hello Vue.js!'
        },
        components: {
            'my-component': MyComponent
        }
    });
&lt;/script&gt;
</code></pre></div>
<p dir="auto">这里面console.log('data');会执行2次，用1.0.18版本以下则不会，怎么回事呢？</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">1.0.21</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="http://jsbin.com/doxonuviwe/edit?html" rel="nofollow">http://jsbin.com/doxonuviwe/edit?html</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ul dir="auto">
<li>Register a Vue component with data function.</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
Vue.component('my-hello', {
    data: function() {
        console.log('hello')
        return {};
    }
});

new Vue({
    el: 'body'
});"><pre class="notranslate"><span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'my-hello'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-en">data</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'hello'</span><span class="pl-kos">)</span>
        <span class="pl-k">return</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-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">el</span>: <span class="pl-s">'body'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<ul dir="auto">
<li>Instantiate the component.</li>
</ul>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;my-hello&gt;&lt;/my-hello&gt;
&lt;my-hello&gt;&lt;/my-hello&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">my-hello</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">my-hello</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">my-hello</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">my-hello</span><span class="pl-kos">&gt;</span></pre></div>
<ul dir="auto">
<li>You will see in the console (DevTool):</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="hello
hello
hello
hello"><pre class="notranslate"><code class="notranslate">hello
hello
hello
hello
</code></pre></div>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">Data function should be called twice since there is only two instances of Vue component.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Data function called four times.</p>
<h3 dir="auto">Quick Fix</h3>
<p dir="auto">Set the data in the <code class="notranslate">created</code> hook.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Vue.component('my-component', {
    created: function() {
        this.$data  = {}; // Set your data here.
    },
});"><pre class="notranslate"><code class="notranslate">Vue.component('my-component', {
    created: function() {
        this.$data  = {}; // Set your data here.
    },
});
</code></pre></div>
<p dir="auto">Hope this helpful.</p>