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>
解决方法
<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 项目中应用解决方案如下：
项目基于 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 引入或拼接