vue项目开发过程常见问题

更新时间：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 的上下文;