对于大部分人来说，在掌握了Vue.js的基本API之后，就已经可以正常开发前端网站了。但是如果你想更高效地使用Vue进行开发，成为Vue.js高手，那么你一定要认真学习我下面要教的5个技巧。面试过程中，很多HR都会问。Image第一招：简化Watch场景还原：在创建组件的时候，我们获取一次列表，同时监听输入框，每次有变化重新获取过滤后的列表。这种场景很常见。有什么办法可以优化吗？关于什么？动作分析：首先，在手表中，可以直接使用函数的字面名称；第二，声明immediate:true表示在组件创建时立即执行。第二招：一劳永逸的组件注册场景还原：我们写了一堆基本的UI组件，每次要用到这些组件，都得先导入，然后声明组件，就是很麻烦！秉承能偷懒就偷懒的原则，一定要想办法优化！动作分析：我们需要使用神器webpack，使用require.context()方法创建自己的（模块）context，实现自动动态require组件。该方法有3个参数：要搜索的文件夹目录、是否也搜索其子目录、匹配文件的正则表达式。我们在components文件夹下添加一个名为global.js的文件，使用webpack将所有需要的基础组件动态打包到这个文件中。最后我们在main.js中引入'components/global.js'，这样我们就可以随时随地使用这些基础组件，无需手动引入。第三招：路由器关键场景的还原：下面这个场景着实伤了很多程序员的心……首先，大家默认使用Vue-router来实现路由控制。假设我们正在写一个博客站点，需求是从/post-page/a跳转到/post-page/b。然后我们惊奇的发现，页面跳转后数据并没有更新？！原因是vue-router“智能地”发现这是同一个组件，然后决定重用这个组件，所以你写在created函数中的方法根本就没有执行。通常的解决办法是监听$route的变化来初始化数据，如下：bug解决了，但是每次都这么写太不优雅了吧？秉承能偷懒就偷懒的原则，我们希望代码写成这样：招式分析：如何实现这样的效果？答案是给router-view加一个uniquekey，这样即使是public组件，只要url改变了，就必须重新创建组件。（虽然损失了一点点性能，但避免了无限的错误）。同时注意，我把key直接设置到路由的全路径，一箭双雕。第四招：万能的render函数场景还原：Vue要求每个组件只有一个根元素。当你有多个根元素时，Vue会给你一个错误。招式分析：有什么办法可以化解吗？，答案是肯定的，但此时我们需要使用render()函数来创建HTML而不是模板。其实用js生成html的好处就是极其灵活和强大，不需要学习使用vue的功能有限的指令API，比如v-for，v-if。（reactjs彻底抛弃模板）第五招：无招无招的高阶组件。专注：这一招威力无穷。请务必掌握，在我们编写组件的时候，父子组件之间的通信是非常重要的。通常我们需要从父组件传递一系列的props给子组件，父组件监听子组件发出的一系列事件。例如：有如下优化点：父组件传递给子组件的每一个props，我们都必须在子组件的Props中显式声明，然后才能使用。这样一来，我们的子组件每次都需要声明很多props，而我们实际上可以直接将placeholer等DOM原生属性从父组件传递给子组件，而无需声明。方法如下$attrs包含在父作用域中不被识别（和获取）为props的属性绑定（除了class和style）。当一个组件没有声明任何props时，所有父范围绑定都包含在这里，并且可以通过v-bind="$attrs"传递给内部组件——在创建更高级别的组件时很有用。注意子组件的@focus=$emit('focus',$event)"其实什么都不做，只是把事件传回给父组件，其实和上面类似，我不需要显式声明它：$listeners包含父作用域中的v-on事件侦听器（没有.native装饰器）。它可以通过v-on="$listeners"传递给内部组件——在创建更高级别的组件时很有用。需要注意的是，由于我们的输入不是BaseInput组件的根节点，默认情况下，父作用域中未被识别为props的属性绑定将“回退”并作为普通HTML功能应用到子组件上根元素。所以我们需要设置inheritAttrs:false，这些默认行为会被去掉，上面两点的优化才能成功。微信公众号：回复我的web前端自助之路，进群，一起和大佬交流技术
