Vue实战中的一些小魔法

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.$store去拿vuex的state,和commit等，甚至，还会通过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，因此，我们应该避免这种情况的出现。

不好的???

{{item}}

好的???

{{item}}

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

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

???

// 父组件

template>

//Toggle 组件

展示和隐藏组件

<button @click=“test”>隐藏组件

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

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

简单介绍一下它们两个：

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

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

$listeners里面。这里举一个对ElementUI的Tabel组件简单的二次封装的

???

<el-table

v-bind=“$attrs”

v-on=“$listeners”>

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

???

// 父组件不需改变

…

//CustomInput

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
长，自己不成体系的自学效果低效漫长且无助。**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-mxjhipwW-1715696426925)]

[外链图片转存中…(img-5HEU7aAE-1715696426926)]

[外链图片转存中…(img-a0bKSQYt-1715696426926)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！