本篇内容主要讲解“提高开发效率和性能的Vue技巧有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“提高开发效率和性能的Vue技巧有哪些”吧!
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、网站空间、营销软件、网站建设、静安网站维护、网站推广。
重庆分公司
重庆分公司
$attrs和$listeners$attrs用于记录从父组件传入子组件的所有不被props捕获以及不是class与style的参数，而$listeners用于记录从父组件传入的所有不含.native修饰器的事件。
那下面的代码作例子：
Vue.component('child', {
props: ['title'],
template: '{{ title }}
'
})
new Vue({
data:{a:1,title:'title'},
methods:{
handleClick(){
// ...
},
handleChange(){
// ...
}
},
template:'
',
}) 则在
attrs的值为{a:1,b:"1"}
listeners的值为{change: handleChange}
通常我们可以用$attrs和$listeners作组件通信，在二次封装组件中使用时比较高效，如：
Vue.component("custom-dialog", {
// 通过v-bind="$attrs"和v-on="$listeners"把父组件传入的参数和事件都注入到el-dialog实例上
template: '',
});
new Vue({
data: { visible: false },
// 这样子就可以像在el-dialog一样用visible控制custom-dialog的显示和消失
template: '',
}); 再举个例子：
Vue.component("custom-select", {
template: `
// 与此同时，在custom-select注入的size变量也会通过v-bind="$attrs"注入到el-select上，从而控制el-select的大小
template: '',
}); $props$porps用于记录从父组件传入子组件的所有被props捕获以及不是class与style的参数。如
Vue.component('child', {
props: ['title'],
template: '{{ title }}
'
})
new Vue({
data:{a:1,title:'title'},
methods:{
handleClick(){
// ...
},
handleChange(){
// ...
}
},
template:'
',
}) 则在$props的值为{title:'title'}。$props可以用于自组件和孙组件定义的props都相同的情况，如：
Vue.component('grand-child', {
props: ['a','b'],
template: '{{ a + b}}
'
})
// child和grand-child都需要用到来自父组件的a与b的值时，
// 在child中可以通过v-bind="$props"迅速把a与b注入到grand-child里
Vue.component('child', {
props: ['a','b'],
template: `
{{a}}加{{b}}的和是：
',
}) 函数式组件相比于一般的vue组件而言，最大的区别是非响应式的。它不会监听任何数据，也没有实例（因此没有状态，意味着不存在诸如created，mounted的生命周期）。好处是因只是函数，故渲染开销也低很多。
把开头的例子改成函数式组件，代码如下：
其实我们在生产环境下也可以调用vue-devtools去进行调试，只要更改Vue.config.devtools配置既可，如下所示：
// 务必在加载 Vue 之后，立即同步设置以下内容 // 该配置项在开发版本默认为 `true`，生产版本默认为 `false` Vue.config.devtools = true;
我们可以通过检测cookie里的用户角色信息去决定是否开启该配置项，从而提高线上 bug 查找的便利性。
Vue中的method可以赋值为高阶函数返回的结果，例如：
上面的search函数赋值为debounce返回的结果，也就是具有防抖功能的请求函数。这种方式可以避免我们在组件里要自己写一遍防抖逻辑。
这里有个例子sandbox，大家可以点进去看看经过高阶函数处理的method与原始method的效果区别
除此之外，method还可以定义为生成器，如果我们有个函数需要执行时很强调顺序，而且需要在data里定义变量来记录上一次的状态，则可以考虑用生成器。
例如有个很常见的场景：微信的视频通话在接通的时候会显示计时器来记录通话时间，这个通话时间需要每秒更新一次，即获取通话时间的函数需要每秒执行一次，如果写成普通函数则需要在data里存放记录时间的变量。但如果用生成器则能很巧妙地解决，如下所示：
