<p><code></p> <p>在日常开发中,我们用的最多的就是 绑定数据</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div v-for=&quot;item in data&quot; :key=&quot;item.id&quot;> <!-- 内容 --> </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in data"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.id"</span>&gt;</span> <span class="hljs-comment">&lt;!-- 内容 --&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>如果你有ng的开发经验,假设 data 你要更新数据了</p> <p><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.data=res.data;</p> <p>但是这在vue中 并不会起到作用,<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>并没有触发变化。</p> <p>vue不是已经实现的实时数据<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>,那么model层发生了变化之后,为什么view层没有更新呢???</p> <p>看官网 这里才发现 深入响应式原理 列表渲染</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000017575524" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="vue 关于数组和对象的更新" title="vue 关于数组和对象的更新" style="cursor: pointer;"></span></p> <p><a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>检测更细变异的方法</p> <ul> <li>push()</li> <li>pop()</li> <li>shift()</li> <li>unshift()</li> <li>splice()</li> <li>sort()</li> <li>reverse()</li> </ul> <p>注意事项</p> <p>由于 JavaScript 的限制,<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 不能检测以下变动的<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>:</p> <p>1. <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.data[index] = res.data;</p> <p>2. <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.data.length = 0;</p> <p>正确的操作方式</p> <p>1. <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.$set(this.data, 1, {name:"huangenai",age:"22"})</p> <p>2. vm.items.splice(0)</p> <p>对象</p> <p>还是由于 JavaScript 的限制,<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 不能检测对象属性的添加或删除:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data(){ return { userProfile: { name: 'Anika' } user: { name: &quot;huangenai&quot;, age: 12 } } }, mounted() { this.$set(this.userProfile, 'age', 27) this.user = Object.assign({}, this.user, { age: 22, name: &quot;huangenai&quot; }); } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>&lt;script&gt; <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> <span class="hljs-keyword">default</span> { <span class="hljs-keyword">data</span>(){ <span class="hljs-keyword">return</span> { userProfile: { name: <span class="hljs-string">'Anika'</span> } user: { name: <span class="hljs-string">"huangenai"</span>, age: <span class="hljs-number">12</span> } } }, mounted() { <span class="hljs-keyword">this</span>.$<span class="hljs-keyword">set</span>(<span class="hljs-keyword">this</span>.userProfile, <span class="hljs-string">'age'</span>, <span class="hljs-number">27</span>) <span class="hljs-keyword">this</span>.user = Object.assign({}, <span class="hljs-keyword">this</span>.user, { age: <span class="hljs-number">22</span>, name: <span class="hljs-string">"huangenai"</span> }); } } &lt;/script&gt;</code></pre> <p>Vue提供了如下的<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>的变异方法,可以触发视图更新</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="push() pop() shift() unshift() splice() sort() reverse() // 介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code><span class="hljs-keyword">push</span>() <span class="hljs-keyword">pop</span>() <span class="hljs-keyword">shift</span>() <span class="hljs-keyword">unshift</span>() <span class="hljs-keyword">splice</span>() <span class="hljs-keyword">sort</span>() <span class="hljs-keyword">reverse</span>() // 介绍一个全栈开发交流学习圈,欢迎加入Q群:<span class="hljs-number">864305860</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25072.html