Vue看了就会的8个小技巧

2024-10-11 23:18:56

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的编码技巧与规范使用详解

当我们完成项目的构建,进入开发阶段的时候,除了你需要了解框架本身的知识点外,我们还需要提前掌握一些项目的编码技巧与规范,在根源上解决之后因编码缺陷而导致的项目维护困难.性能下降等常见问题,为项目多人开发提供编码的一致性. 本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量,并会结合代码片段加强大家的理解与认知.当然不是所有实例都是针对 Vue.js 开发的,有些同样也适用于其他前端项目. 实例 1. 使用对象代替 if 及 switch 在很多情况下,我们经常会遇到循环判断执行赋值操
Vue开发中常见的套路和技巧总结

属性排放 export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 } 管理请求加载状态 async beforeMount(){ // 开始加载 this.loading = true
Vue 技巧之控制父类的 slot

首先来思考一个问题:是否有一种方法可以从子组件填充父组件的插槽? 最近一位同事问我这个问题,答案很简单:可以的.但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题,但也是一个非常有趣的问题. 为什么会有这个问题在我们的应用程序中,我们有一个顶部栏,其中包含不同的按钮.搜索栏和其他一些控件.根据每个人所在的页面,它可能略有不同,因此我们需要一种基于每个页面配置它的方法. 为此,我们希望每个页面都能够配置操作栏.看起来很简单,但这里有个问题这个顶部栏(我们称之为ActionB
php和vue配合使用技巧和方法

php和vue可以配合使用,我们可以利用vue和php进行前后端分离. 进行前后端分离的好处前后端分离后可以使前后端工程师分工更加明确,让后端工程师专注于业务逻辑的实现以及性能优化,安全.前端工程师专注于用户体验,交互模式.大家各司其职,提高工作效率,充分发挥各自的长处. 进行前后端分离的坏处 1.SEO上的考虑如果是 PC 端的站点,需要考虑是否需要强支持 SEO,前后端分离的架构,很可能需要搜索引擎的 spider 执行完 js 才能得到完整的可收录的页面,而"执行 js "并
Vue 开发必须知道的36个技巧(小结)

前言 Vue 3.x 的Pre-Alpha 版本.后面应该还会有 Alpha.Beta 等版本,预计至少要等到 2020 年第一季度才有可能发布 3.0 正式版; 所以应该趁还没出来加紧打好 Vue2.x 的基础; Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧; 后续 Vue 3.x 出来后持续更新. 1.require.context() 1.场景:如页面需要导入多个组件,原始写法: import titleCom from '@/c
详解在Vue.js编写更好的v-for循环的6种技巧

在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. <ul> <li v-for='product in products'> {{ product.name }} </li> </ul> 但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大. 让我们开始吧. 1.始终在v-for循环中使用key 首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做
浅谈Vue 函数式组件的使用技巧

什么是函数式组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数.简单来说是一个无状态和无实例的组件基本写法: Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function(createElement, context) { // ... }
vue中的双向数据绑定原理与常见操作技巧详解

本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.
浅谈Vue3.0之前你必须知道的TypeScript实战技巧

很多人对TypeScript的使用还停留在基本操作上,其实TypeScript的特性非常强大,我们利用好这些特性可以有效地提高代码质量.加速开发效率,今天就介绍9个非常实用的TypeScript技巧或者特性. 注释的妙用我们可以通过 /** */ 来注释TypeScript的类型,当我们在使用相关类型的时候就会有注释的提示,这个技巧在多人协作开发的时候十分有用,我们绝大部分情况下不用去花时间翻文档或者跳页去看注释. 巧用类型推导 TypeScript 能根据一些简单的规则推断(检查)变量的类型
vue的keep-alive用法技巧

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 方法1 include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. e