脚本宝典收集整理的这篇文章主要介绍了

总结一下vue里一些小技巧

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>(官方里的我就不细说了,自个撸文档就成,下面是实践里常用的几个小技巧或者说是遇到的坑,若有错误望大家指正)<br /><strong><em><em>1、</em></em></strong><strong><em></em><em>当用a标签设置新窗口打开页面,设置url时,建议给href进行v-bind绑定</em></strong>,然后写相对路径即可,它默认会继续走router-link相对路由那一套,没必要在调用location的api获取hostname,然后拼接字符串。如图:<br /><span class="img-wrap"><img data-src="/img/bV0p2g?w=1510&amp;h=510" src="/img/bV0p2g?w=1510&amp;h=510" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p><strong>2、<strong><em><em>组件和route使用$router.params.xx耦合度太高,可尝试使用props解耦</em></em></strong>,操作如图:</strong><br /><span class="img-wrap"><img data-src="/img/bV0p3k?w=777&amp;h=432" src="/img/bV0p3k?w=777&amp;h=432" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p><strong>3、解决实际应用场景下重定向问题:</strong></p> <p><strong>a、可以直接采用redirect的callbcak</strong></p> <p><span class="img-wrap"><img data-src="/img/bV0p3T?w=558&amp;h=384" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><strong>b、使用路由守卫:可采用全局导航守卫或者组件内导航守卫</strong>,比如beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等等,但是要注意在beforeRouteEnter里不能调用<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>,因为当守卫执行前,组件实例还没被创建。<em>也要注意beforeRouteUpdate这个钩子,vue版本2.2+才可以使用,</em>个人感觉这是一个非常好用的钩子,真是牛逼lity,使组件拓展性提升了不是一个档次。如下图是使用全局导航守卫控制用户权限认证的小demo:<br /><span class="img-wrap"><img data-src="/img/bV0p6A?w=1354&amp;h=578" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>4、<strong>关于异步加载路由,建议单独提出一个asyncComponent.js文件</strong>,1是为了方便组件管理,改个path改个细节真的超级方便,2来当组件过多时会显得router.js内容非常拥挤,也不美观。异步引组件代码如下:<br /><span class="img-wrap"><img data-src="/img/bV0p7T?w=2068&amp;h=520" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></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: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><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>5、<strong>尽量减少dom层级</strong>,比如我们在模板里写路由跳转时,虽说router-link默认为我们设置了一个a标签,但是在实际场景可能不太实用,我们不访使用tag这一属性,直接上图:</p> <p><span class="img-wrap"><img data-src="/img/bV0p92?w=936&amp;h=328" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>6、<strong>为了体验,请给路由跳转添加一些过渡效果</strong>,同操作其他标签一样,给router-view套一层transtion,如图:<br /><span class="img-wrap"><img data-src="/img/bV0qaX?w=1794&amp;h=1426" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>7、<strong>切记router.push的时候不要path和params一起用</strong>,params会失效,建议用query,如果非要用params,可以使用组件的name。<strong>而且一定要注意取数据的时候是route,不是router,千万不要被坑了,</strong>打印出来可以发现route是本路由的信息,而router是全局的router信息。<br />8、<strong>关于keep-alive,本人建议谨慎考虑</strong>,一方面它确实特别方便缓存组件信息,但是同时如果你缓存的组件过多,也会对性能产生一定的影响,或者你某个组件的服务端代码发生内存泄漏等情况导致浏览器反应过慢或者卡死,,那么对不起,只能重新打开一次网址了(本人亲测!!为了封装内置浏览器tab页付出了血的代价!)。。。至于具体配置,可参考同站作者:spademan<br />9、<strong>使用vuex存储用户信息时,刷新页面会数据丢失</strong>,建议搭配localStorage。<br />10、后续还会有,一时半会儿也想不起来,到时候在加吧,。。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

总结一下vue里一些小技巧

全部内容,希望文章能够帮你解决

总结一下vue里一些小技巧

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过