<p><code></p> <p>本篇文章扣丁学堂<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5培训小编给读者们分享一下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>的缺陷,对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>的缺陷或者是对<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5开发技术感兴趣的小伙伴就随小编来了解下吧。</p> <p>1、vue 实例创建后,再向其上添加属性,不能监听</p> <p>当创建一个<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>实例时,将遍历所有 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 对象,并为每个数据属性添加了 get 和 set。 get 和 set 允许 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 观察数据的更改并触发更新。但是,如果你在 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 实例化后添加(或删除)一个属性,这个属性不会被 vue 处理,改变 get 和 set。</p> <p>如果你不想创建一个新的对象,你可以使用Vue.set设置一个新的对象属性。该方法确保将属性创建为一个响应式属性,并触发视图更新:</p> <p>function addToCart (id) {</p> <p>var item = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.cart.findById(id);</p> <p>if (item) {</p> <p>item.qty++</p> <p>} else {</p> <p>// 不要直接添加一个属性,比如 item.qty = 1</p> <p>// 使用Vue.set 创建一个响应式属性</p> <p>Vue.set(item, 'qty', 1)</p> <p><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.cart.push(item)</p> <p>}</p> <p>}</p> <p>addToCart(myProduct.id);</p> <p>2、<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a></p> <p>Object.define<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>erty 的一个缺陷是无法监听<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>变化。</p> <p>当直接使用索引(index)设置<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>项时,不会被 vue 检测到:</p> <p>app.my<a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a>[index] = newVal;</p> <p>然而Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法, vm.items[indexOfItem] = newValue 这种是无法检测的。</p> <p>push();</p> <p>pop();</p> <p>shift();</p> <p>unshift();</p> <p>splice();</p> <p>sort();</p> <p>reverse();</p> <p>同样可以使用Vue.set来设置数组项:</p> <p>Vue.set(app.my<a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a>, index, newVal);</p> <p>3、proxy 与 defineproperty</p> <p>Proxy 对象在ES2015规范中被正式发布,用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。</p> <p>它在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>我们可以这样认为,Proxy是Object.define<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>erty的全方位加强版,具体的文档可以查看此处;</p> <p>Proxy有多达13种拦截方法,不限于apply、ownKeys、de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>erty、has等等,是Object.defineProperty不具备的。</p> <p>Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。</p> <p>Proxy作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利。</p> <p>当然,Proxy的劣势就是兼容性问题,而且无法用polyfill磨平,因此Vue的作者才声明需要等到下个大版本(3.0)才能用Proxy重写。</p> <p>以上就是扣丁学堂<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>5在线学习小编给大家分享的vue数据<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="浏览关于“双向绑定”的文章" target="_blank" class="tag_link">双向绑定</a>的缺陷,希望对小伙伴们有所帮助,想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。</p> <p>想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂,扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习,此外还有与时俱进的HTML5视频教程供大家学习,想要学好HTML5开发技术的小伙伴快快行动吧。</p> <p></code></p>

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