前言
今天分享 5 个你或许在使用 Vue 开发过程中也遇到的问题。
Vue 使用时常见的 5 个问题
自定义路径别名
可能有些人注意到了，在 vue-cli 生成的模板中在导入组件时使用了这样的语法：
import Index from '@/components/Index'
这个 @ 是什么东西？后来改配置文件的时候发现这个是 webpack 的配置选项之一：路径别名。
我们也可以在基础配置文件中添加自己的路径别名，比如下面这个就把 ~ 设置为路径 src/components 的别名：
// build/webpack.base.js
{
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'~': resolve('src/components')
}
}
}
然后我们导入组件的时候就可以这样写：
// import YourComponent from '/src/components/YourComponent'
import YourComponent from '~/YourComponent'
既解决了路径过长的麻烦，又解决了相对路径的烦恼，方便很多吧!
CSS 作用域与模块
组件内样式
通常，组件中 <style></style> 标签里的样式是全局的，在使用第三方 UI 库（如：Element）时，全局样式很可能影响 UI 库的样式。
我们可以通过添加 scoped 属性来使 style 中的样式只作用于当前组件：
<style lang="less" scoped>
@import 'other.less';
.title {
font-size: 1.2rem;
}
</style>
在有 scoped 属性的 style 标签内导入其他样式，同样会受限于作用域，变为组件内样式。复用程度较高的样式不建议这样使用。
导入样式
相对于 style 使用 scoped 属性时的组件内样式，有时候我们也需要添加一些全局样式。当然我们可以用没有 scoped 属性的 style 来写全局样式。
但是相比较，更推荐下面这种写法：
/* 单独的全局样式文件 */
/* style-global.less */
body {
font-size: 10px;
}
.title {
font-size: 1.4rem;
font-weight: bolder;
}
然后在入口文件中导入全局样式：
// src/main.js
import 'style-global.less'
v-for 的使用 tips
v-for 指令很强大，它不仅可以用来遍历数组、对象，甚至可以遍历一个数字或字符串。
基本语法就不讲了，这里讲个小 tips：
索引值
在使用 v-for 根据对象或数组生成 DOM 时，有时候需要知道当前的索引。我们可以这样：
<ul>
<li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}
</ul>
但是，在遍历数字的时候需要注意，数字的 value 是从 1 开始，而 key 是从 0 开始：
<ul>
<li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }}
</ul>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
vue 中 this 指向问题
method 不能使用箭头函数
因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。
const App = new Vue({
el: 'body',
methods: {
foo: () => {
console.log(this) // undefined
}
}
})
const App = new Vue({
el: 'body',
methods: {
foo () {
console.log(this) // Vue instance
}
}
})
method 中方法使用定时器需要使用箭头函数
箭头函数中的this指向是固定不变的，即是在定义函数时的指向 而普通函数中的this指向时变化的，即是在使用函数时的指向
箭头函数代码：
methods: {
goPage: function (index) {
this.newPage = index
},
inv: function () {
this.invt = setInterval(() => {
this.goPage(this.nextPage)
console.log(this)
//此时的this指向是该vue组件，不管在哪使用，指向都是该vue组件
}, 1000)
}
}
普通函数的代码：
methods: {
goPage: function (index) {
this.newPage = index
},
inv: function () {
this.invt = setInterval(function () {
this.goPage(this.nextPage)
console.log(this)
//此时的this并不是该vue组件，而是指向window。
}, 1000)
}
}
setInterval() 与 setTimeout() 是 window 对象的函数，所以 this 会指向 window
一个 template 模板只能有一个可渲染的子元素
一个 <template> 下面只能有一个可渲染的子元素否则会报错， 报错如下：
即：
<template>
Title
<p>Balabala...</p>
<p>Balabala...</p>
</template>
// 应该为
<template>
<div>
Title
<p>Balabala...</p>
<p>Balabala...</p>
</div>
</template>
最后
这篇文章是我从笔记中抽离出来的，有些内容已经忘了出处。
如果你想进【大前端交流群】，关注公众号点击“交流加群”添加机器人自动拉你入群。关注我第一时间接收最新干货。
