Vue看了就会的8个小技巧


Posted in Vue.js onJanuary 21, 2021

1. 始终在 `v-for` 中使用 `:key`

在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测是很有必要的。这样Vue就可以跟踪组件状态,并对不同的元素有一个常量引用。在使用动画或Vue转换时,如果没有key ,Vue只会尝试使DOM尽可能高效。这或许会导致v-for中的元素出现乱序,或行为难以预测。如果我们对每个元素都有唯一的键引用,就能更好地预测Vue应用程序将如何精确地处理DOM操作。

2. 使用驼峰式声明 props,并在模板中使用短横线命名来访问 props

最佳做法只是遵循每种语言的约定。在 JS 中,驼峰式声明是标准,在HTML中,是短横线命名。Vue 已经提供了驼峰式声明和短横线命名之间转换,所以除了实际声明它们之外,我们不用担心任何事情。

3. 在事件中使用短横线命名

在发出定制事件时,最好使用短横线命名,这是因为在父组件中,我们使用相同的语法来侦听该事件。所以为了确保我们各组件之间的一致性,让你的代码更具可读性,请在两个地方都坚持使用短横线命名。

4. 函数式组件

函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。组件需要的一切都是通过 context 参数传递。它是一个上下文对象,具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。

5. 重用相同路由的组件

开发小伙伴们常常会遇到多个路由解析为同一个Vue组件的情况。问题是,Vue出于性能原因,默认情况下共享组件将不会重新渲染,如果你尝试在使用相同组件的路由之间进行切换,则不会发生任何变化。如果你依然希望重新渲染这些组件,就可以通过在 router-view 组件中提供 :key 属性来实现。

6. $createElement

一般情况下,每个Vue实例都可以访问 $createElement 方法来创建和返回虚拟节点。例如,可以利用它在可以通过v-html指令传递的方法中使用标记。在函数组件中,可以将此方法作为渲染函数中的第一个参数进行访问。

7. 使用JSX

由于Vue CLI 3默认支持使用JSX,因此现在你可以使用JSX编写代码。如果尚未使用Vue CLI 3,则可以使用 babel-plugin-transform-vue-jsx 获得JSX支持。

8. 作用域插槽实现 UI 和业务逻辑的分离

我们常常会想复用一个组件的业务逻辑,但是不想使用该组件的 UI时,可以使用作用域插槽实现 UI 和业务逻辑的分离。作用域插槽大致的思路是将 DOM 结构交给调用方去决定,组件内部只关注业务逻辑,最后将数据和事件等通过 :item ="item" 的方式传递给父组件去处理和调用,实现 UI 和业务逻辑的分离。再结合渲染函数,就可以实现无渲染组件的效果。

以上就是Vue看了就会的8个小技巧的详细内容,更多关于vue 技巧的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python中的pprint折腾记
2015/01/21 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python实现微信机器人的方法
2019/09/06 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
python 模块导入问题汇总
2021/02/01 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
酒店采购员岗位职责
2014/03/14 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
教学工作总结范文5篇
2019/08/19 职场文书