Vue 踩坑指南

1. v-if 和 v-for 避免同时使用

在使用下面模版时，v-for 比 v-if 具有更高的优先级，v-for会先遍历再判断是否显示，因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，这会一定程度影响效率。

<ul>
  <li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</ul>

解决方法

• 通过计算属性先筛选一遍 list

<ul>
  <li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

<script>
export default {
    computed: {
        activeUsers: function () {
            return this.users.filter(function (user) {
                return user.isActive
            })
        }
    }
}
</script>

• v-if 移动至容器元素上 (比如 ul, ol)（个人推荐）

如果没有外层元素，我们可以添加<template v-if=''></template> 进行包裹。

<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

2. SCSS 全局变量

以下是存放变量的 scss 文件：

// @/styles/variables.scss
// SCSS 公共变量，例如颜色等

$colorBg: #304156;

即使在 main.js 中引入文件，但是在实际组件的应用中也需要进行引入否则无法使用全局变量：

<template>
  <div class="notice">注意！</div>
</template>

<style lang="scss" scoped>
@import " @/styles/variables.scss"; // 如果不加这个的话则无法使用变量
.notice {
  background: $colorBg;
}
</style>

那么全局 SASS/SCSS 变量在 Vue 项目中应用解决方案如下：

• 使用 sass-resources-loader

• 项目基于 Vue-cli 3.x 的话可以配置vue.config.js文件，详见参考资料。

module.exports = {
  // css相关配置
  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `,
      },
    },
  },
}

3. Vue 使用 computed 时不要使用箭头函数

在获取 vuex state 的过程中，在 computed 下，如果使用箭头函数则无法获取到数据！！！

export default {
  computed: {
    // 错误做法
    isOpened: () => {
      return this.$store.state.app.sideBar.isOpened // 无法获取到数据，this 指向问题
    },
    // 正确做法
    isOpened() {
      return this.$store.state.app.sideBar.isOpened
    },
  }
}

4. router-link 添加 @click/@mouseover 等无效

router-link ****会阻止 click/mouseover 等事件，如果只用 @click/@mouseover 等不加 native则事件就不会触发。

<router-link :to="pathName" @click.native="handleClick"/>

5. Vue 中引入本地图片

<img src="/images/test.jpg" alt="">

编译后:<img src="/images/test.jpg" alt="">

用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。

<img :src="require('./assets/images/test.jpg')" alt="">
<img :src="img3" alt="">
<script>
export default:{
    data(){
        return {
          img3:require('./assets/images/test.jpg'),
        }
      },
}
</script>

编译后: <img src="/img/test.jpg" alt="">

当路径的文件名需要拼接变量的时候，可使用 require() 引入，在 template 的:src 或者 script 的 data 中都可以进行 require 引入或拼接

如果你对内容有任何疑问，欢迎提交 ❕issues 或 ✉️ email