<p>The problem with this is that the same <code>data</code> object will be shared across all instances of <code>MyComponent</code>! This is most likely not what we want, so we should use a function that returns a fresh object as the <code>data</code> option:</p>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> MyComponent = Vue.extend(&#123;</span><br><span class="line"> data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="keyword">return</span> &#123; a: <span class="number">1</span> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>The <code>el</code> option also requires a function value when used in <code>Vue.extend()</code>, for exactly the same reason.</p>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">table</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="title">tr</span> <span class="attribute">is</span>=<span class="value">"my-component"</span>&gt;</span><span class="tag">&lt;/<span class="title">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="Props"><a href="#Props" class="headerlink" title="Props"></a>Props</h2><h3 id="Passing_Data_with_Props"><a href="#Passing_Data_with_Props" class="headerlink" title="Passing Data with Props"></a>Passing Data with Props</h3><p>Every component instance has its own <strong>isolated scope</strong>. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using <strong>props</strong>.</p>

<p>A “prop” is a field on a component’s data that is expected to be passed down from its parent component. A child component needs to explicitly declare the props it expects to receive using the <a href="/api/#props"><code>props</code> option</a>:</p>

<p>This API also supports dynamic attributes. The <code>this.params[key]</code> value is automatically kept up-to-date. In addition, you can specify a callback when the value has changed:</p>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-example</span> <span class="attribute">v-bind:a</span>=<span class="value">"someValue"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.directive(<span class="string">'example'</span>, &#123;</span><br><span class="line"> params: [<span class="string">'a'</span>],</span><br><span class="line"> paramWatchers: &#123;</span><br><span class="line"> a: <span class="function"><span class="keyword">function</span> (<span class="params">val, oldVal</span>) </span>&#123;</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'a changed!'</span>)</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="deep"><a href="#deep" class="headerlink" title="deep"></a>deep</h3><p>If your custom directive is expected to be used on an Object, and it needs to trigger <code>update</code> when a nested property inside the object changes, you need to pass in <code>deep: true</code> in your directive definition.</p>

<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-my-directive</span>=<span class="value">"obj"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.directive(<span class="string">'my-directive'</span>, &#123;</span><br><span class="line"> deep: <span class="literal">true</span>,</span><br><span class="line"> update: <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>&#123;</span><br><span class="line"> <span class="comment">// will be called when nested properties in `obj`</span></span><br><span class="line"> <span class="comment">// changes.</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>It should be noted that only these proxied properties are <strong>reactive</strong>. If you attach a new property to the instance after it has been created, it will not trigger any view updates. We will discuss the reactivity system in details later.</p>

<p>In addition to data properties, Vue instances expose a number of useful instance properties and methods. These properties and methods are prefixed with <code>$</code> to differentiate from proxied data properties. For example:</p>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> data = &#123; a: <span class="number">1</span> &#125;</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line"> el: <span class="string">'#example'</span>,</span><br><span class="line"> data: data</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">vm.$data === data <span class="comment">// -&gt; true</span></span><br><span class="line">vm.$el === <span class="built_in">document</span>.getElementById(<span class="string">'example'</span>) <span class="comment">// -&gt; true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// $watch is an instance method</span></span><br><span class="line">vm.$watch(<span class="string">'a'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</span><br><span class="line"> <span class="comment">// this callback will be called when `vm.a` changes</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="Instance_Lifecycle"><a href="#Instance_Lifecycle" class="headerlink" title="Instance Lifecycle"></a>Instance Lifecycle</h2><p>Each Vue instance goes through a series of initialization steps when it is created - for example, it needs to set up data observation, compile the template, and create the necessary data bindings. Along the way, it will also invoke some <strong>lifecycle hooks</strong>, which give us the opportunity to execute custom logic. For example, the <code>created</code> hook is called after the instance is created:</p>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line"> data: &#123;</span><br><span class="line"> a: <span class="number">1</span></span><br><span class="line"> &#125;,</span><br><span class="line"> created: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"> <span class="comment">// `this` points to the vm instance</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'a is: '</span> + <span class="keyword">this</span>.a)</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// -&gt; "a is: 1"</span></span><br></pre></td></tr></table></figure>

<p>There are also other hooks which will be called at different stages of the instance’s lifecycle, for example <code>compiled</code>, <code>ready</code> and <code>destroyed</code>. All lifecycle hooks are called with their <code>this</code> context pointing to the Vue instance invoking it. Some users may have been wondering where the concept of “controllers” lives in the Vue.js world, and the answer is: there are no controllers in Vue.js. Your custom logic for a component would be split among these lifecycle hooks.</p>