提高开发效率和性能的Vue技巧有哪些
本篇内容主要讲解“提高开发效率和性能的Vue技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“提高开发效率和性能的Vue技巧有哪些”吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、网站空间、营销软件、网站建设、静安网站维护、网站推广。
1. 巧用$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: ``, }); new Vue({ data: { value: "" }, // v-model在这里其实是v-bind:value和v-on:change的组合, // 在custom-select里,通过v-bind="$attrs" v-on="$listeners"的注入, // 把父组件上的value值双向绑定到custom-select组件里的el-select上,相当于 // 与此同时,在custom-select注入的size变量也会通过v-bind="$attrs"注入到el-select上,从而控制el-select的大小 template: ' ', });
2. 巧用$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}}的和是:` }) new Vue({ template:'', })
3. 妙用函数式组件
函数式组件相比于一般的vue
组件而言,最大的区别是非响应式的。它不会监听任何数据,也没有实例(因此没有状态,意味着不存在诸如created
,mounted
的生命周期)。好处是因只是函数,故渲染开销也低很多。
把开头的例子改成函数式组件,代码如下:
4. 妙用 Vue.config.devtools
其实我们在生产环境下也可以调用vue-devtools
去进行调试,只要更改Vue.config.devtools
配置既可,如下所示:
// 务必在加载 Vue 之后,立即同步设置以下内容 // 该配置项在开发版本默认为 `true`,生产版本默认为 `false` Vue.config.devtools = true;
我们可以通过检测cookie
里的用户角色信息去决定是否开启该配置项,从而提高线上 bug 查找的便利性。
5. 妙用 methods
Vue
中的method
可以赋值为高阶函数返回的结果,例如:
上面的search
函数赋值为debounce
返回的结果,也就是具有防抖功能的请求函数。这种方式可以避免我们在组件里要自己写一遍防抖逻辑。
这里有个例子sandbox,大家可以点进去看看经过高阶函数处理的method
与原始method
的效果区别
除此之外,method
还可以定义为生成器,如果我们有个函数需要执行时很强调顺序,而且需要在data
里定义变量来记录上一次的状态,则可以考虑用生成器。
例如有个很常见的场景:微信的视频通话在接通的时候会显示计时器来记录通话时间,这个通话时间需要每秒更新一次,即获取通话时间的函数需要每秒执行一次,如果写成普通函数则需要在data
里存放记录时间的变量。但如果用生成器则能很巧妙地解决,如下所示:
{{ timeFormat }}
但需要注意的是:method 不能是箭头函数
注意,不应该使用箭头函数来定义
method
函数 (例如plus: () => this.a++
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.a
将是undefined
。
6. 妙用 watch 的数组格式
很多开发者会在watch
中某一个变量的handler
里调用多个操作,如下所示:
虽然fn1
和fn2
都需要在value
变动的时候调用,但两者的调用时机可能不同。fn1
可能仅需要在deep
为false
的配置下调用既可。因此,Vue
在watch
的值添加了Array
类型来针对上面所说的情况,如果用watch
为Array
的写法处理可以写成下面这种形式:
7. 妙用$options
$options
是一个记录当前Vue
组件的初始化属性选项。通常开发中,我们想把data
里的某个值重置为初始化时候的值,可以像下面这么写:
this.value = this.$options.data().value;
这样子就可以在初始值由于需求需要更改时,只在data
中更改即可。
这里再举一个场景:一个el-dialog
中有一个el-form
,我们要求每次打开el-dialog
时都要重置el-form
里的数据,则可以这么写:
打开弹窗 男 女
每次el-dialog
打开之前都会调用其@open
中的方法initForm
,从而重置form
值到初始值。
如果要重置data
里的所有值,可以像下面这么写:
Object.assign(this.$data, this.$options.data()); // 注意千万不要写成下面的样子,这样子就更改this.$data的指向。使得其指向另外的与组件脱离的状态 this.$data = this.$options.data();
8. 妙用 v-pre,v-once
v-pre
v-pre
用于跳过被标记的元素以及其子元素的编译过程,如果一个元素自身及其自元素非常打,而又不带任何与Vue
相关的响应式逻辑,那么可以用v-pre
标记。标记后效果如下:
v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
对于部分在首次渲染后就不会再有响应式变化的元素,可以用v-once
属性去标记,如下:
{{i}}
如果上述例子中的变量options
很大且不会再有响应式变化,那么如例子中用上v-once
对性能有提升。
9. 妙用 hook 事件
如果想监听子组件的生命周期时,可以像下面例子中这么做:
这样的写法可以用于处理加载第三方的初始化过程稍漫长的子组件时,我们可以加loading
动画,等到子组件加载完毕,到了mounted
生命周期时,把loading
动画移除。
初次之外hook
还有一个常用的写法,在一个需要轮询更新数据的组件上,我们通常在created
里开启定时器,然后在beforeDestroy
上清除定时器。而通过hook
,开启和销毁定时器的逻辑我们都可以在created
里实现:
像上面这种写法就保证了逻辑的统一,遵循了单一职责原则。
到此,相信大家对“提高开发效率和性能的Vue技巧有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站名称:提高开发效率和性能的Vue技巧有哪些
本文来源:http://myzitong.com/article/iijohh.html