|
| 1 | + |
| 2 | +<!DOCTYPE html> |
| 3 | +<html lang="en"> |
| 4 | + <head> |
| 5 | + <title>Common Beginner Gotchas - vue.js</title> |
| 6 | + <meta charset="utf-8"> |
| 7 | + <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces."> |
| 8 | + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
| 9 | + <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'> |
| 10 | + <link href='http://fonts.googleapis.com/css?family=Dosis:300,500&text=Vue.js' rel='stylesheet' type='text/css'> |
| 11 | + <link rel="icon" href="/images/logo.png" type="image/x-icon"> |
| 12 | + <script> |
| 13 | + window.PAGE_TYPE = "" |
| 14 | + </script> |
| 15 | + <link rel="stylesheet" href="/css/page.css" type="text/css"> |
| 16 | + <script> |
| 17 | + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
| 18 | + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
| 19 | + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
| 20 | + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
| 21 | + |
| 22 | + ga('create', 'UA-46852172-1', 'vuejs.org'); |
| 23 | + ga('send', 'pageview'); |
| 24 | +</script> |
| 25 | + <script src="/js/vue.js"></script> |
| 26 | + </head> |
| 27 | + <body> |
| 28 | + <div id="mobile-bar"> |
| 29 | + <a class="menu-button"></a> |
| 30 | + <a class="logo" href="/"></a> |
| 31 | + </div> |
| 32 | + |
| 33 | + <div id="header"> |
| 34 | + <a id="logo" href="/"> |
| 35 | + <img src="/images/logo.png"> |
| 36 | + <span>Vue.js</span> |
| 37 | + </a> |
| 38 | + <ul id="nav"> |
| 39 | + <li> |
| 40 | + <form id="search-form"> |
| 41 | + <input type="text" id="search-query" class="st-default-search-input"> |
| 42 | + </form> |
| 43 | +</li> |
| 44 | +<li><a href="/guide/" class="nav-link">Guide</a></li> |
| 45 | +<li><a href="/api/" class="nav-link">API</a></li> |
| 46 | +<li><a href="/examples/" class="nav-link">Examples</a></li> |
| 47 | +<li><a href="/blog/" class="nav-link">Blog</a></li> |
| 48 | +<li class="nav-dropdown-container"> |
| 49 | + <a class="nav-link">Community</a><span class="arrow"></span> |
| 50 | + <ul class="nav-dropdown"> |
| 51 | + <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li> |
| 52 | + <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li> |
| 53 | + <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li> |
| 54 | + <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li> |
| 55 | + </ul> |
| 56 | +</li> |
| 57 | + |
| 58 | + |
| 59 | + </ul> |
| 60 | +</div> |
| 61 | + <div id="main"> |
| 62 | + |
| 63 | + <div class="sidebar blog"> |
| 64 | + <ul class="main-menu"> |
| 65 | + <li> |
| 66 | + <form id="search-form"> |
| 67 | + <input type="text" id="search-query" class="st-default-search-input"> |
| 68 | + </form> |
| 69 | +</li> |
| 70 | +<li><a href="/guide/" class="nav-link">Guide</a></li> |
| 71 | +<li><a href="/api/" class="nav-link">API</a></li> |
| 72 | +<li><a href="/examples/" class="nav-link">Examples</a></li> |
| 73 | +<li><a href="/blog/" class="nav-link">Blog</a></li> |
| 74 | +<li class="nav-dropdown-container"> |
| 75 | + <a class="nav-link">Community</a><span class="arrow"></span> |
| 76 | + <ul class="nav-dropdown"> |
| 77 | + <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li> |
| 78 | + <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li> |
| 79 | + <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li> |
| 80 | + <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li> |
| 81 | + </ul> |
| 82 | +</li> |
| 83 | + |
| 84 | + |
| 85 | + </ul> |
| 86 | + <div class="list"> |
| 87 | + <h2>Recent Posts</h2> |
| 88 | + <ul> |
| 89 | + |
| 90 | + <li> |
| 91 | + <a href="/2016/02/06/common-gotchas/" class="sidebar-link current">Common Beginner Gotchas</a> |
| 92 | + </li> |
| 93 | + |
| 94 | + <li> |
| 95 | + <a href="/2015/12/28/vue-cli/" class="sidebar-link">Announcing vue-cli</a> |
| 96 | + </li> |
| 97 | + |
| 98 | + <li> |
| 99 | + <a href="/2015/10/28/why-no-template-url/" class="sidebar-link">Why Vue.js doesn't support templateURL</a> |
| 100 | + </li> |
| 101 | + |
| 102 | + <li> |
| 103 | + <a href="/2015/10/26/1.0.0-release/" class="sidebar-link">Vue.js 1.0.0 Released</a> |
| 104 | + </li> |
| 105 | + |
| 106 | + <li> |
| 107 | + <a href="/2015/06/11/012-release/" class="sidebar-link">Vue.js 0.12 released!</a> |
| 108 | + </li> |
| 109 | + |
| 110 | + <li> |
| 111 | + <a href="/2014/12/08/011-component/" class="sidebar-link">0.11 Component Tips</a> |
| 112 | + </li> |
| 113 | + |
| 114 | + <li> |
| 115 | + <a href="/2014/11/09/vue-011-release/" class="sidebar-link">Vue.js 0.11 released!</a> |
| 116 | + </li> |
| 117 | + |
| 118 | + <li> |
| 119 | + <a href="/2014/07/29/vue-next/" class="sidebar-link">Vue.js 0.10.6, and what's next</a> |
| 120 | + </li> |
| 121 | + |
| 122 | + <li> |
| 123 | + <a href="/2014/03/22/vuejs-010-release/" class="sidebar-link">Vue.js 0.10 is here!</a> |
| 124 | + </li> |
| 125 | + |
| 126 | + </ul> |
| 127 | + </div> |
| 128 | +</div> |
| 129 | +<div class="content blog post"> |
| 130 | + <h1>Common Beginner Gotchas</h1> |
| 131 | + <div id="ad"> |
| 132 | + <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> |
| 133 | + </div> |
| 134 | + <h4>Feb 6, 2016</h4> |
| 135 | + <p>There are few type of questions that we frequently see from users who are new to Vue.js. Although they are all mentioned somewhere in the guide, it may not be very easy to find the corresponding section if you are not already familiar with them. Therefore we are aggregating them in this post and hopefully it can save you some time!</p> |
| 136 | +<a id="more"></a> |
| 137 | +<h3 id="Why_isn_u2019t_the_DOM_updating_3F"><a href="#Why_isn_u2019t_the_DOM_updating_3F" class="headerlink" title="Why isn’t the DOM updating?"></a>Why isn’t the DOM updating?</h3><p>Most of the time, when you change a Vue instance’s data, the view updates. But there are two edge cases:</p> |
| 138 | +<ol> |
| 139 | +<li><p>When you are <strong>adding a new property</strong> that wasn’t present when the data was observed. Due to the limitation of ES5 and to ensure consistent behavior across browsers, Vue.js cannot detect property addition/deletions. The best practice is to always declare properties that need to be reactive upfront. In cases where you absolutely need to add or delete properties at runtime, use the global <a href="/api/#Vue-set"><code>Vue.set</code></a> or <a href="/api/#Vue-delete"><code>Vue.delete</code></a> methods.</p> |
| 140 | +</li> |
| 141 | +<li><p>When you modify an Array by directly setting an index (e.g. <code>arr[0] = val</code>) or modifying its <code>length</code> property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method <code>arr.$set(index, value)</code> which is just syntax sugar for <code>arr.splice(index, 1, value)</code>.</p> |
| 142 | +</li> |
| 143 | +</ol> |
| 144 | +<p>Further reading: <a href="/guide/reactivity.html">Reactivity in Depth</a>.</p> |
| 145 | +<h3 id="When_is_the_DOM_updated_3F"><a href="#When_is_the_DOM_updated_3F" class="headerlink" title="When is the DOM updated?"></a>When is the DOM updated?</h3><p>Vue.js uses an asynchronous queue to batch DOM updates. This means when you modify some data, the DOM updates do not happen instantly: they are applied asynchronously when the queue is flushed. So how do you know when the DOM has been updated? Use <code>Vue.nextTick</code> right after you modify the data. The callback function you pass to it will be called once the queue has been flushed.</p> |
| 146 | +<p>Further reading: <a href="/guide/reactivity.html#Async_Update_Queue">Async Update Queue</a>.</p> |
| 147 | +<h3 id="Why_does_data_need_to_be_a_function_3F"><a href="#Why_does_data_need_to_be_a_function_3F" class="headerlink" title="Why does <code>data</code> need to be a function?"></a>Why does <code>data</code> need to be a function?</h3><p>In the basic examples, we declare the <code>data</code> directly as a plain object. This is because we are creating only a single instance with <code>new Vue()</code>. However, when defining a <strong>component</strong>, <code>data</code> must be declared as a function that returns the initial data object. Why? Because there will be many instances created using the same definition. If we still use a plain object for <code>data</code>, that same object will be <strong>shared by reference</strong> across all instance created! By providing a <code>data</code> function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.</p> |
| 148 | +<p>Further reading: <a href="/guide/components.html#Component_Option_Caveats">Component Option Caveats</a>.</p> |
| 149 | +<h3 id="HTML_case_insensitivity"><a href="#HTML_case_insensitivity" class="headerlink" title="HTML case insensitivity"></a>HTML case insensitivity</h3><p>All Vue.js templates are valid, parsable HTML markup, and Vue.js relies on spec-compliant parsers to process its templates. However, as specified in the standard, HTML is case-insensitive when matching tag and attribute names. This means camelCase attributes like <code>:myProp="123"</code> will be matched as <code>:myprop="123"</code>. As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as <code>myProp</code> should be bound in templates as <code>:my-prop</code>.</p> |
| 150 | +<p>We are discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner as well. Join the conversation <a href="https://github.com/vuejs/vue/issues/2308" target="_blank" rel="external">here</a>.</p> |
| 151 | + |
| 152 | +</div> |
| 153 | + |
| 154 | + |
| 155 | + </div> |
| 156 | + <script src="/js/smooth-scroll.min.js"></script> |
| 157 | + <script src="/js/common.js"></script> |
| 158 | + |
| 159 | + |
| 160 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script> |
| 161 | + <script> |
| 162 | + document.addEventListener('DOMContentLoaded', function() { |
| 163 | + FastClick.attach(document.body); |
| 164 | + }, false); |
| 165 | + </script> |
| 166 | + </body> |
| 167 | +</html> |
0 commit comments