VUE常见问题汇总

1.npm下载超时或者失败

npm安装依赖包是从国外服务器下载，受网络影响很大，可能会出现异常，cnpm解决了这个问题，cnpm是国内镜像

安装：

执行命令
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

2.can’t not find ‘xxModule’ - 找不到某些依赖或者模块

这种情况一般报错信息可以看到是哪个包抛出的信息，一般卸载模块重新安装即可

3.data functions should return an object

这个问题是 vue 实例内,单组件的data必须返回一个对象;如下

data() {
    return {
      // 遮罩层
      loading: true
    }
  },

必须包含return，为什么要return一个数据对象呢？曾经看到的解释：data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例，如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题...

4.用了axios,IE浏览器不识别（IE9+）

那是因为 IE 整个家族都不支持 promise, 解决方案:

npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();

5.在函数内用了this.xxx=,为什么抛出Cannot set property ‘xxx’ of undefined;

this是和当前运行的上下文绑定的。。。

一般在axios或者其他promise，或者setInterval 这些默认都是指向最外层的全局钩子

简单点说：最外层的上下文是window,vue内则是Vue对象而不是实例

解决方案: 

暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var) 
箭头函数: 会强行关联当前运行区域为 this 的上下文; 

6.引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

这个是 webpack 里面的对应插件处理的，对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染; 

具体配置在webpack.base.conf.js里面的rules里面的 url-loader，这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。

7.Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素. 可以用v-if和v-else-if指令来控制其他元素达到并存的状态。

换个直白的解释,就是有一个唯一的父类,包裹者; 比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!

8.跨域问题怎么破!比如No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

这种问题老生常谈了,我就不细说了..大体说一下; 

1: CORS , 前后端都要对应去配置,IE10+ 
2: nginx 反向代理,一劳永逸 <-- 线上环境可以用这个

线下开发模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable这么个玩意, 也可以做接口反向代理。

// 在 config 目录下的index.js
proxyTable: {
  "/bp-api": {
    target: "http://new.d.st.cn",
    changeOrigin: true,
    // pathRewrite: {
    //   "^/bp-api": "/"
    // }
  }
}

// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道

 当然还有依旧坚挺的jsonp大法!不过局限性比较多,比较适合一些特殊的信息获取!

 9.需要遍历的数组值更新了,值也赋值了,为什么视图不更新!

那是因为有局限性啊,官方文档也说的很清楚,只有一些魔改的之后的方法提供跟原生一样的使用姿势(却又可以触发视图更新);

一般我们更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);

10.路由模式改为history后,除了首次启动首页没报错,刷新访问路由都报错!

必须给对应的服务端配置查询的主页面..也可以认为是主路由入口的引导。

11.Uncaught ReferenceError: xxx is not define

实例内的 data 对应的变量没有声明，你导入模块报这个错误,那绝逼是导出没写好。 

12.Error in render function:”Type Error: Cannot read property ‘xxx’ of undefined”

这种问题大多都是初始化的姿势不对;比如引入echart这些...仔细去了解下生命周期,再来具体初始化;

vue 组件有时候也会(嵌套组件或者 props传递初始化)..也是基本这个问题

 13.Unexpected token: operator xxxxx

这个一看就是语法错误啊，基本都是符号问题， 一般报错会给出哪一行或者哪个组件。

14.安装模块时命令窗口输出unsupported platform xxx

一般两种情况,node版本不兼容,系统不兼容; 

 解决方案: 要么不装,要么满足安装要求;

 15.Unexpected tab charater这些

一般是你用脚手架初始化的时候开了 eslint ;要么遵循规则,要么改变规则;要么直接把 webpack 里面的 eslint 检测给关闭了。

16.Unknown custom element: <xxx> - did you register the component correctly?

组件没有正确引入或者正确使用,依次确认

导入对应的组件
在 components 内声明 
在 dom 区域声明标签

17.Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String.

这种问题一般就是组件内的 props 类型已经设置了接受的范围类型, 而你传递的值却又不是它需要的类型,

18.组件的通讯有哪几种啊!

基本最常用的是这几种;

父传子: props 
子传父: emit
兄弟通讯:event bus: 就是找一个中间组件来作为信息传递中介 
vuex: 信息树

 19.vuex的用户信息为什么还要存一遍在浏览器里(sessionStorage or localStorage)

因为 vuex的 store 干不过刷新啊，保存在浏览器的缓存内,若用户刷新的话,值再取一遍呗;

20.使用el-date-picker遇到的坑：回显后无法更新数据

在回显赋值的时候不写=，用$set

如：this.form.value2 = arrayObj; 不推荐

     this.$set(this.form,'value2',arrayObj); 正确

21.Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题

原因：两个el-form元素没有作区分标识，内部误以为是同一个元素，导致跳转时触发校验。

解决方案：给每个el-form元素添加不同的key属性值

22.function方法和箭头函数中this的使用

 如图：在function方法中如果写了this，其实是无效的，原因是此时的this已经不指向data中的变量了，指向window了，所以先在外面吧this暂存一下

 如图：如果是箭头函数，可以写this，箭头函数中的访问的this实际上是其父级作用域中的this，箭头函数本身的this是不存在的，这样子就相当于此时函数中的this是在声明的时候就确定了，所以是直接指向了data里面的变量。

23.JSON.parse（）以及JSON.parse(JSON.stringify(xxx))

JSON.parse() 是将字符串中的对象解析出来

例：  var str = "{'name':'huahua','age':'22'}";

　　  JSON.parse(str);

　　 var obj = {name:"hua",age: 26};

　　  JSON.stringify(obj);

JSON.parse(JSON.stringify())复制时间对象、Error对象、正则表达式，函数，或者undefined等值，此方法就会出现问题
1.如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式；
2.如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}；
3.如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失；
4.如果json里有NaN、Infinity和-Infinity，则序列化的结果会变成null；
5.如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor；
6.如果对象中存在循环引用的情况也无法实现深拷贝

如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

 var test = {
    name: 'a',
    date: [new Date(1536627600000), new Date(1540047600000)],
  };

  let b;
  b = JSON.parse(JSON.stringify(test))

24.v-model表单绑定问题

当表单类型为text时，v-model绑定的类型只能为String，当是checkbox时，v-model绑定的类型可以为String，也可以为Boolean

25.对于普通对象，没有部署原生的 iterator 接口，直接使用 for...of 会报错

var obj = {
   'name': 'test',
   'age': 12
 }
 
 for(let key of obj) {
   console.log('for of obj', key)
 }
 // Uncaught TypeError: obj is not iterable

可以使用 for...in 循环遍历键名

for(let key in obj) {
   console.log('for in key', key)
 }
 /*
   for in key name
   for in key age
 */

也可以使用 Object.keys(obj) 方法将对象的键名生成一个数组，然后遍历这个数组

for(let key of Object.keys(obj)) {
   console.log('key', key)
 }
 /*
   key name
   key age
 */

26.弹窗或者抽屉嵌套表单，this.$refs.表单值 值为undefined

element为了优化性能，在弹框未首次打开之前，是会不渲染弹框body中的内容的，一般情况下这样的设定是没有问题的，弹框未打开时我们一般也是不需要对弹框内容做操作的，但是在一些特殊情况，可能就有问题了，在dialog里面嵌套1个表单（<el-form ref="addUserFormRef">），使用 $refs 获取这个表单对象会出现错误，this.$refs.addUserFormRef  // 如果打印会报错  undefined

解决方法一：

this.$nextTick(function () {

        console.log(this.$refs.addUserFormRef )

      })

解决方法二：

setTimeout(()=> {

        console.log(this.$refs.addUserFormRef )

      },0)

若弹窗中嵌套的表单，涉及到表单校验并非是弹窗刚打开时的操作，则不会出现如上情况，当在created或者mouted方法中涉及表单校验的，获取的表单对象值可能会为undefined，按如上修改即可

27.使用vue进行监听resize导致的内存泄漏问题

切换页面后，调整窗口，发现控制台不断的报错，提示xxx为null或者是can’t find property of xxx之类的。后面点击错误定位到相应的源码，发现错误是在之前页面中监听了resize事件的地方。

一直提示null的报错，我监听完，在页面销毁时也进行了移除监听，原来的写法

使用的箭头函数，貌似这样写没用，虽然不知道为什么，然后按照百度改了一下，就好使了，解决方法：

export default {
	mounted() {
		window.addEventListener('resize', this.onResize);
	},
	beforeDestroy() {
		window.removeEventListener("resize", this.onResize);
    },
	methods: {
		onResize() {
			//todo
		}
	}
}