Vue实战【常用的Vue小魔法】

简介: Vue实战【常用的Vue小魔法】

🌟前言

大家好,上一期给大家总结了一些常见的Vue报错并如何解决的一些方法,私下也收到了好多小伙伴的补充;小伙伴们实在是太强啦,和大家一起共同学习进步真的很开心。今天博主就为大家总结一些实战中的经常用到的Vue小魔法,可以使你的开发也包括项目性能得到很大的提升,接下来让我们一起来看看吧。


🌟能让你首次加载更快的路由懒加载,怎么能忘?

路由懒加载可以让我们的包不需要一次把所有的页面的加载进来,只加载当前页面的路由组件就行。

举个🌰,如果这样写,加载的时候会全部都加载进来。

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

所以,应该避免上面的写法,尽量使用懒加载 懒加载写法,结合webpack的import使用

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

你是否还记得有一个叫Object.freeze的方法?

应该所有同学都知道,vue初始化的时候会将data里面的数据都搞成响应式数据吧。但是,我们在写业务逻辑的时候会有些数据一初始化就永远不会改变,它根本就不需要被vue做成响应式数据,因此我们应该将这些不用改变的数据通过Object.freeze方法冻结它,避免vue初始化的时候,做一些无用的操作。

举个🌰

export default {
  data:()=>({
    list:Object.freeze([{title:'我永远不需要改变,我不需要响应式'}])
  })
}

🌟异步组件那么强,你是不是没用过?

异步组件可以让我们在需要一些组件时才将它加载进来,而不是一初始化就加载进来,这跟路由懒加载时一个概念。

举个🌰

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

异步组件还有一种比较完善的写法

举个🌰

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 延迟几毫秒,默认200
      timeout:3000, // 加载几毫米之后就超时,触发error组件
      loading:LoadingComponent, // 组件未加载回来前显示
      error:ErrorComponent // 组件超时时显示
    })
  }
}

🌟你是不是还在computed中使用this?

我猜还有很多同学,在computed属性中通过this.xxx去拿data里面的数据,和methods里面的方法吧,或许还会通过this.route去获取路由里面的数据吧。其实,我们可以避免这些丑陋的this,它甚至会给我们带来看不见的性能问题。实现上,我们通过this能访问到的数据,在computed的第一个参数上都能解构出来。

举个🌰

export default {
   haha({$attrs,$route,$store,$listeners,$ref}){
     // 还能结构很多属性,可自行打印康康
     return 
   }
}

🌟如何避免 v-if 和 v-for 一起使用?

为什么要避免v-if和v-for在同一个元素上同时使用呢?因为在vue的源码中有一段代码时对指令的优先级的处理,这段代码是先处理v-for再处理v-if的。所以如果我们在同一层中一起使用两个指令,会出现一些不必要的性能问题,比如这个列表有一百条数据,再某种情况下,它们都不需要显示,当vue还是会循环这个100条数据显示,再去判断v-if,因此,我们应该避免这种情况的出现。


不好的🌰

<h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

好的🌰

<template v-if="status" >
    <h3 v-for="item in 100" :key="item">{{item}}</h3>
</template>

v-if 与 v-for 为什么不建议一起使用

v-for 和 v-if 不要在同一个标签中使用,因为解析时先解析 v-for 再解析 v-if。如果遇到需要同时使用时可以考虑上诉写法或者写成计算属性的方式。

🌟那么强的.sync修饰符你为什么不用?

如果你想要在父组件控制一个子组件的显示隐藏,是不是还在传一个prop和一个自定义方法,这样会很麻烦,不妨试一试sync修饰符。

举个🌰

// 父组件
 template>
  <div>
    <Toggle :show.sync = 'show'></Toggle>
  </div>
</template>
//Toggle 组件
<template>
  <div>
    <div v-if="show">
    展示和隐藏组件
  </div>
  <button @click="test">隐藏组件</button>
  </div>
</template>
<script>
export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show',false)
    }
  }
}
</script>

🌟v-model还有这么好的修饰符!

v-model上有3个比较好用的修饰符不知到大家有没有用过,一个是lazy,一个是number,一个是trim。

  • lazy:可以将@input事件变成@blur事件;
  • number:只能输入数字值 ;
  • trim:清空两边的空格

举个🌰

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

🌟其他的修饰符

事件修饰符

  • .stop 阻止事件继续传播;
  • .prevent 阻止浏览器或标签默认行为;

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理;

.self 只当在 event.target 是当前元素自身时触发处理函数;

.once 事件将只会触发一次;

.passive 告诉浏览器你不想阻止事件的默认行为。

键盘事件的修饰符


.enter(捕获“回车”键)

.tab(捕获“缩进”键)

.delete (捕获“删除”和“退格”键)

.esc(捕获“退出”键)

.space(捕获“空格”键)

.up(捕获“上”键)

.down(捕获“下”键)

.left(捕获“左”键)

.right(捕获“右”键)

鼠标按钮修饰符

.left

.right

.middle

🌟你是否知道v-model还能自定义属性?

如果想在一个自定义的Input组件上使用v-model,那么就要在子组件,介绍一个value,和触发input事件,v-model的默认语法糖就是这两个东西的组合。

举个🌰

// 父组件
<template>
  <div>
    <CustomInput v-model='msg' />
  </div>
</template>
//CustomInput
<template>
  <div>
    <input type="text" :value="value" @input="test">
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    test(e){
      this.$emit('input',e.target.value)
    }
  },
}
</script>

但是,如果组件里面不是input,而是一个checkbox或者一个radio呢?我不想接受一个value和input事件,我想接收一个更加语义化的checked和change事件,那该怎么办?

举个🌰

// 父组件不需改变
...
//CustomInput
<template>
  <div>
    <input type="checkbox" :checked="checked" @change="test">
  </div>
</template>
<script>
 props:['checked'],
 model:{
    props:'checked',
    event:'change'
  },
  methods: {
    test(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</script>

🌟你还在用浏览器的scrollTop滚动你的页面吗?

有些时候我们在操作一下页面的滚动行为,那么我们第一时间就会想到scrollTop。其实我们还有第二个选择就是VueRouter给我们提供的scrollBehavior钩子。

举个🌰

const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // position参数可自行打印康康,点击浏览器左右箭头会触发
      return{
          // 这里可以返回很多参数,下面简单列就几个,详情自己康康官网
          x:100,
          y:100,
          selector:#app,
          offset:200,
          //等等
      }
  }
})

🌟你在子组件上定义的原生事件不生效?

有时候我们想在子组件上面监听一些事件,比如click,但是不论你怎么点,它都没反应,为什么呢?

举个🌰

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

因为这样写vue会认为,你自定义了一个click事件,要在子组件通过$emit(‘click’)触发才行。如果我就是要在父组件触发呢?那就要用到native修饰符了。

举个🌰

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

🌟Vuex 页面刷新数据丢失怎么解决

需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件 ;
推荐使用 vuex-persist 插件
,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中

🌟写在最后

这篇文章分析那个了一些vue开发比较常见的报错,你是否也经历过呢?后续会为小伙伴们持续更新Vue的一些实战小魔法!各位小伙伴让我们 let’s be prepared at all times!

🌟JSON包里写函数,关注博主不迷路

目录
相关文章
|
16天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
136 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
573 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
111 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
246 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
377 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
4月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
73 1
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
320 0
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
141 0

热门文章

最新文章