经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实战中的一些实用小魔法汇总
来源：jb51　　时间：2021/6/15 14:18:24　　对本文有异议

能让你首次加载更快的路由懒加载，怎么能忘？

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

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

  1. const router = new VueRouter({
  2.   routes:[
  3.     {
  4.       path: '/',
  5.       name: 'Home',
  6.       component: Home
  7.     },
  8.     {
  9.       path: '/about',
  10.       name: 'About',
  11.       component: About
  12.     }
  13.   ]
  14. })

所以，应该避免上面的写法，尽量使用懒加载

懒加载写法,结合webpack的import食用

  1. const router = new VueRouter({
  2.   routes:[
  3.     {
  4.       path: '/',
  5.       name: 'Home',
  6.       component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  7.     },
  8.     {
  9.       path: '/about',
  10.       name: 'About',
  11.       component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  12.     }
  13.   ]
  14. })

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

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

🌰

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

异步组件那么强，你是不是没用过？

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

🌰

  1. export default {
  2.   components:{
  3.     AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  4.   }
  5. }

首次加载的包是不包含改组件代码的

当点击触发某种行为引进的包是这样的

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

🌰

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

你是不是还在computed中使用this？

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

🌰

  1. export default {
  2.    haha({$attrs,$route,$store,$listeners,$ref}){
  3.      // 还能结构很多属性，可自行打印康康
  4.      return 
  5.    }
  6. }

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

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

不好的🌰

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

好的🌰

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

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

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

🌰

  1.  // 父组件
  2.  
  3.  template>
  4.   <div>
  5.     <Toggle :show.sync = 'show'></Toggle>
  6.   </div>
  7. </template>
  8.  
  9. //Toggle 组件
  10.  
  11. <template>
  12.   <div>
  13.     <div v-if="show">
  14.     展示和隐藏组件
  15.   </div>
  16.   <button @click="test">隐藏组件</button>
  17.   </div>
  18. </template>
  19. <script>
  20.  
  21. export default {
  22.   props:['show'],
  23.   methods: {
  24.     test(){
  25.       this.$emit('update:show',false)
  26.     }
  27.   }
  28. }
  29. </script>
  30.  

$attr和$listeners让你封装组件如鱼得水！

$attr和$listeners可能很多同学没怎么去使用，其实它们让我们对一些组件库的组件二次封装，非常好用的。

简单介绍一下它们两个：

$attr:如果一个组件不但传了prop需要的属性，还传了prop之外的其他属性，那么这些属性都会被收集到$attr里面。

$listeners：如果一个组件传了自定义事件，但子组件没有通过emit触发，那么这些自定义方法都会被收集到$listeners里面。

这里举一个对ElementUI的Tabel组件简单的二次封装的🌰

  1. <el-table 
  2.    v-bind="$attrs"
  3.    v-on="$listeners">
  4.    <template v-for="item in column">
  5.     <el-table-column v-bind="item" />
  6.    </template>
  7. </el-table>
  8. <script>
  9. export default {
  10.   props:{
  11.       column:{
  12.         type:Array,
  13.         required:true
  14.       }
  15.    }
  16. }
  17. <script>

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

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

lazy:可以将@input事件变成@blur事件

number：只能输入数字值

trim:清空两边的空格

🌰

  1.    //lazy
  2.    <input v-model.lazy="msg" />
  3.    //number
  4.    <input v-model.number="msg" />
  5.    //trim
  6.    <input v-model.trim="msg" />

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

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

🌰

  1. // 父组件
  2. <template>
  3.   <div>
  4.     <CustomInput v-model='msg' />
  5.   </div>
  6. </template>
  7.  
  8. //CustomInput
  9.  
  10. <template>
  11.   <div>
  12.     <input type="text" :value="value" @input="test">
  13.   </div>
  14. </template>
  15. <script>
  16. export default {
  17.   props:['value'],
  18.   methods: {
  19.     test(e){
  20.       this.$emit('input',e.target.value)
  21.     }
  22.   },
  23. }
  24. </script>
  25.  

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

🌰

  1. // 父组件不需改变
  2. ...
  3. //CustomInput
  4. <template>
  5.   <div>
  6.     <input type="checkbox" :checked="checked" @change="test">
  7.   </div>
  8. </template>
  9. <script>
  10.  props:['checked'],
  11.  model:{
  12.     props:'checked',
  13.     event:'change'
  14.   },
  15.   methods: {
  16.     test(e){
  17.       this.$emit('change',e.target.checked)
  18.     }
  19.   }
  20. }
  21. </script>
  22.  

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

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

🌰

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

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

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

🌰

  1. <template>
  2.     <div>
  3.         <Child @click="test"></Child>
  4.     </div>
  5. </template>
  6. <script>
  7.     methods:{
  8.         test(){}
  9.     }
  10. </script>
  11.  

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

🌰

  1. <template>
  2.     <div>
  3.         <Child @click.native="test"></Child>
  4.     </div>
  5. </template>
  6. <script>
  7.     methods:{
  8.         test(){}
  9.     }
  10. </script>
  11.  

用keep-alive缓存一下你的页面状态吧！

keep-alive可以帮助我们在切换组件的时候，保留上一个组件不被销毁，它在管理后台系统中比较常用。

🌰

  1. <keep-alive>
  2.     <router-view></router-view>
  3. </keep-alive>

总结

到此这篇关于vue实战中的一些实用小魔法的文章就介绍到这了,更多相关vue实战技巧内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号