# 能让你首次加载更快的路由懒加载 路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。 举个🌰，如果这样写，加载的时候会全部都加载进来。  所以，应该避免上面的写法，尽量使用懒加载 懒加载写法,结合webpack的import食用  # 你是否还记得有一个叫Object.freeze的方法？ 应该所有同学都知道，vue初始化的时候会将data里面的数据都搞成响应式数据吧。但是，我们在写业务逻辑的时候会有些数据一初始化就永远不会改变，它根本就不需要被vue做成响应式数据，因此我们应该将这些不用改变的数据通过Object.freeze方法冻结它，避免vue初始化的时候，做一些无用的操作。  # 异步组件那么强，你是不是没用过？ 异步组件可以让我们在需要一些组件时才将它加载进来，而不是一初始化就加载进来，这跟路由懒加载时一个概念。  首次加载的包是不包含改组件代码的  当点击触发某种行为引进的包是这样的  # 你是不是还在computed中使用this？ 我猜还有很多同学，在computed属性中通过this.xxx去拿data里面的数据，和methods里面的方法吧，或许还会通过this. store去拿vuex的state，和commit等，甚至还会通过this.router去获取路由里面的数据吧。其实，我们可以避免这些丑陋的this,它甚至会给我们带来看不见的性能问题。实现上，我们通过this能访问到的数据，在computed的第一个参数上都能结构出来。  # 如何避免v-if和v-for一起使用？ 为什么要避免v-if和v-for在同一个元素上同时使用呢？因为在vue的源码中有一段代码时对指令的优先级的处理，这段代码是先处理v-for再处理v-if的。所以如果我们在同一层中一起使用两个指令，会出现一些不必要的性能问题，比如这个列表有一百条数据，再某种情况下，它们都不需要显示，当vue还是会循环这个100条数据显示，再去判断v-if，因此，我们应该避免这种情况的出现。 不好的🌰  好的🌰  # 那么强的.sync修饰符你为什么不用? 如果你想要在父组件控制一个子组件的显示隐藏，是不是还在传一个prop和一个自定义方法，这样会很麻烦，不妨试一试sync修饰符。  # attr和listeners让你封装组件如鱼得水！ attr和listeners可能很多同学没怎么去使用，其实它们让我们对一些组件库的组件二次封装，非常好用的。 简单介绍一下它们两个： attr：如果一个组件不但传了prop需要的属性，还传了prop之外的其他属性，那么这些属性都会被收集到attr里面 listeners：如果一个组件传了prop自定义事件，但子组件没有通过emit触发，那么这些自定义方法都会被收集到listeners里面 这里举一个对ElementUI的Tabel组件简单的二次封装的🌰  # v-model还有这么好的修饰符！ v-model上有3个比较好用的修饰符不知到大家有没有用过，一个是lazy,一个是number,一个是trim。 lazy:可以将@input事件变成@blur事件 number：只能输入数字值 trim:清空两边的空格  # 你是否知道v-model还能自定义属性？ 如果想在一个自定义的Input组件上使用v-model，那么就要在子组件，介绍一个value，和触发input事件，v-model的默认语法糖就是这两个东西的组合。  但是，如果组件里面不是input,而是一个checkbox或者一个radio呢?我不想接受一个value和input事件，我想接收一个更加语义化的checked和change事件，那该怎么办？  # 你还在用浏览器的scrollTop滚动你的页面吗？ 有些时候我们在操作一下页面的滚动行为，那么我们第一时间就会想到scrollTop。其实我们还有第二个选择就是VueRouter给我们提供的scrollBehavior钩子。  # 你在子组件上定义的原生事件不生效？ 有时候我们想在子组件上面监听一些事件，比如click，但是不论你怎么点，它都没反应，为什么呢？  因为这样写vue会认为，你自定义了一个click事件，要在子组件通过$emit('click')触发才行。如果我就是要在父组件触发呢？那就要用到native修饰符了。  # 用keep-alive缓存一下你的页面状态吧！