三招让你成为vue.js大师

对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这三招你一定得认真学习一下了。

第一招：化繁为简的Watchers

场景还原：

组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取一次筛选后的列表这个场景很常见，有没有办法优化一下呢？

招式解析：

首先，在watchers中，可以直接使用函数的字面量名称；其次，声明immediate:true表示创建组件时立马执行一次。

第二招：釜底抽薪的router key 

场景还原： 

假设我们在写一个网站，需求是从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router"智能地"发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据，但是这样的写法很繁琐，秉持着能偷懒则偷懒的原则，有没有办法优化一下？ 

招式解析： 答案是给router-view添加一个unique的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。（虽然损失了一丢丢性能，但避免了无限的bug）。同时，注意我将key直接设置为路由的完整路径，一举两得。

第三招：无所不能的render函数 

场景还原: 

vue要求每一个组件都只能有一个根元素，当你有多个根元素时，vue就会给你报错 

招式解析: 那有没有办法化解呢，答案是有的，只不过这时候我们需要使用render()函数来创建HTML，而不是template。其实用js来生成html的好处就是极度的灵活功能强大，而且你不需要去学习使用vue的那些功能有限的指令API，比如v-for, v-if。

欢迎更多的同学来和我们一起讨论和学习更多前端前沿技术和知识，前端全栈的时代已经来临~

百度T8顶级前端大牛MAX独家视频分享限量免费开放！！！

获取方式：添加文末小学妹微信。通过申请后，免费领取！！！因分享内容宝贵，仅限前200名添加微信的《web前端教程》公众号读者，需要的读者抓紧速度，先到先得。

领取方式：添加小学妹微信，即可领取Vue视频。

PS：本套视频由百度T8顶级前端大牛MAX亲自操刀，耗时一年研发的精品课程——《Web全栈工程师》，浓缩了MAX团队8年以来的实战经验，以此来帮助初级前端工程师实现全方位进阶。课程深度对标百度T6--T7，阿里P7-P8，适合具备1-4年开发经验的前端程序员们学习。

MAX老师介绍

百度T8顶级前端架构师，W3C Web Platform 工作组核心成员，9 年一线大厂前端经验，曾就职于阿里、百度。拥有丰富的前后端全栈工作经验，独立负责数亿级 PV 的项目，在 ES6/7/next、Node.js、Vue、小程序、PWA 等的使用上具备顶级的实战经验。历经从 jQuery 到模块化，到大前端，再到现在小程序的前端进化史。