更新时间：2018-07-29
1.data functions should return an object
// 这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下
<script>
export default {
data () {
return {}
}
}
</script>
// 为什么要 return 一个数据对象呢?
官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
2.我给组件内的原生控件添加事件,怎么不生效了
<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--例1-->
<el-input placeholder="请输入关键词" @mouseover="testKeyword"></el-input>
<!--例2-->
<router-link to="/aaa" @click="navTab">导航</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<!--官方文档：你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使 用 v-on 的 .native 修饰符：-->
<base-input v-on:focus.native="onFocus"></base-input>
3.我用了 axios或ES6promise新特性, 为什么 IE 浏览器不识别(IE9+)
IE系列不能识别promise特性，在webpack入口处添加babel-polyfill插件
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
// 使用babel-polyfill 可以模拟ES6使用的环境，可以使用ES6的所有新方法
app: ["babel-polyfill", "./src/main.js"]
},
...
}
4.跨域问题No 'Access-Control-Allow-Origin' header is present on the requested resource.
1: CORS 前后端都要对应去配置,IE10+
2: nginx 反向代理，线上环境可以用这个详细配置可以看我另一篇文章nginx反向代理
3：jsonp 只支持get方式，局限太大
如果你用的是vue-cli脚手架生成的目录结构，开发环境可以配置proxyTable来解决跨域，本质上也是node.js代理了请求
// 在 config 目录下的index.js
// target : 就是 api 的代理的实际路径
// pathRewrite : 就是路径重定向
proxyTable: {
"/apis": {
target: "http://10.1.1.1:8090",
changeOrigin: true,
pathRewrite: {
"^/": "/"
}
}
}
5.明明更改了数组元素的内容，或者添加删除了对象的属性，视图为什么没有更新
// 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
// 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
// 当你修改数组的长度时，例如：vm.items.length = newLength
// 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
// 解决办法：this.$set(obj,item,value);
官方文档传送门：vue
6.为什么我的组件间的样式不能继承或者覆写
// 单组件开发模式下,请确认是否开启了 CSS模块化功能!!
// 也就是scoped(vue-cli 里面配置了,只要加入这个属性就自动启用)
// <style lang="stylus" scoped></style>复制代码为什么不能继承或者覆写呢,那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash!
// 写的时候是这个
.test{}
// 编译过后,加上了 hash
.test[data-v-1ec35ffc]{}
7.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
官方文档：vue-router
8.父组件如何直接调用子组件的方法
可以通过$refs或者$chilren来拿到对应的vue实例,从而操作
9.组件的通讯方式有几种
父传子: props
子传父: this.$emit(funName, arg)
兄弟通讯:
event bus: 就是找一个中间组件来作为信息传递中介
vuex: 状态管理，为了避免刷新时丢失数据可以和localStorage或sessionStorage本地存储结合使用
传送门:
vue官方组件间的通讯
vuex
10.既然localStorage和sessionStorage能做到数据维护,为什么还要引入vuex
可维护性: 因为是单向数据流,所有状态是有迹可循的...数据的传递也可以及时分发响应
易用性: 它使得我们组件间的通讯变得更强大,而不用借助中间件这类来实现不同组件间的通讯
11.vuex的用户信息为什么还要存一遍在浏览器里(sessionStorage or localStorage)
vuex的store保存在浏览器的缓存内,若用户刷新的话,数据将会丢失
12.npm run dev 报端口错误!Error: listen EADDRINUSE :::8080
若果是vue-cli脚手架搭建的vue项目
更改webpack 配置: config/index.js
dev: {
env: require("./dev.env"),
port: 8080, // 更改启动端口
...
}
若是自己搭建的nodejs服务，或nginx服务，更改启动的端口号就行
13.什么时候用v-if,什么用 v-show
v-if : DOM 区域没有生成,只有条件为真时才渲染
v-show: DOM 区域在组件渲染的时候同时渲染了,只是display：none
14.@/components/layout/xxx'中的@是什么意思
// webpack可以配置alias(也就是路径别名)
// 若是vue-cli脚手架位置在build/webpack.base.conf.js
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'common': resolve('./src/common'),
'components': resolve('./src/components'),
'api': resolve('./src/api'),
'base': resolve('./src/base')
}
// 尽情配置吧
15.我在函数内用了this.xxx=,为什么抛出Cannot set property 'xxx' of undefined
这又是this的套路了..this是和当前运行的上下文绑定的...
一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:"最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!";
解决方案:
暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
箭头函数: 会强行关联当前运行区域为 this 的上下文;