vue常见的坑（vue常见问题）

今天给各位分享vue常见的坑的知识，其中也会对vue常见问题进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、typescript+vue踩过的坑-常见报错
• 2、关于Vue ，key ，el-table， :row-key遇到的一个坑
• 3、Vue项目开发过程中遇到的坑
• 4、VUE-PC端项目遇到的坑总结
• 5、记录app webview内嵌vue单页应用所遇到的坑
• 6、Vue开发之坑四-return a||b 可行 return b||a报错

typescript+vue踩过的坑-常见报错

原因： typescript不能识别.vue文件

解决办法： 引入vue的typescript declare库

在tsconfig.json中加入

其中，types是自己延伸的一些declare

下面的是vue中的types拓展

改后的tsconfig

原因： 问题同上，使用node/vue的types没起作用

解决办法： 自己写一个。上面的tsconfig中。types就是为了让我们多一些自己的declare。

里面写上

原因：缺少typescript类型

解决方法：

抛出错误 Property '$message' does not exist on type

一、（推荐）

二、起作用

三、（推荐）

在types下新建如下目录结构

相当于扩展typescript的declare

4.XMLHttpRequest is not defined

在typescript中，经常要用一些自己从其他js插件中引入的变量。

但直接在ts中写，ts会报not defined的错误

解决办法： 使用window.XMLHttpRequest

关于Vue ，key ，el-table， :row-key遇到的一个坑

vue前端开发，经常遇到key为undefine的bug，如图

很多时候 我们把后台返回的Id赋值给key,但是该死的后台返回的Id居然也有重复的时候。

这个时候会出现各种意外情况，入页面卡死，页面空白，下拉列表点不动等等错误。

特别的el-table有写特殊功能需要我们把row-key赋值，如果key重复，渲染就会失败。

为了防止key重复，我们会想当然的认为返回一个随机数字就可以了，所以会这样返回一个随机字符串

Math.random()+''；

但是这其实是有坑的，这只是解决了首次渲染的问题，但是第二次渲染时，有部分元素我们是希望他重复使用的，这样渲染效率性能更好。而且很重要的，有些情况必须这样。例如

这个情况会导致下拉框无法下拉，因为当下拉时页面重新渲染，重新渲染又导致父元素被删除了，所以无法下拉。

key重复 就是 该为不同时却识别为相同了

key一直随机，就是该识别为相同 识别为不同了

下面提供一个生成key的函数 解决Key重复，key随机问题

Vue项目开发过程中遇到的坑

1 从浏览器中了解这个应用的呈现结果，对整个应用具有的大功能模块有个大致了解，比如包含欢迎页、用户管理、业务数据查询等；

2 学习了解Vue项目的默认目录结构及加载流程，比如文件index.html、package.json、main.js，目录/build、/config、/src等。

参考链接 ：

优雅的 Vue 项目目录结构设计

VUE启动流程

涉及state对象使用的，大部分是需要先引入vuex，而vuex对象的定义及处理文件，都默认存放在工程的/src/store目录下，到该目录下的相应文件中可找到其他文件依赖的变量数据。

参考链接 ：

Vuex 是什么？

import语法是很多其他语言中都有的关键词，较易理解，但export是干什么用的，export default和export又有什么区别，其他文件是如何使用export出去的变量的？

参考链接 ：

export default 和 export 区别

工程中经常见到v-auth指令，从字面意思上可以理解为权限的验证，但在网上搜不到该指令的含义和用法，后才得知为本应用的自定义指令，并有专门针对该指令进行定义的函数。

参考链接 ：

自定义指令

刚对Vue的组件概念有些了解时，会把所有的元素标签都认为是Vue自定义组件的一部分，然后开始到工程中去找该组件的定义，其实还有很多是官方组件，比如el-popover、el-table、el-table-column等，到相应的官网上找标签的定义和用法即可。

参考链接 ：

Element UI 教程

1 默认用的intellij idea作为Vue工程的开发IDE，在该IDE中启动Vue工程，需要安装node js，并在IDE中配置Run Configurations，详细配置见下面的参考链接；

2 配置好运行参数之后，在启动过程中报错：Error: listen EACCES: permission denied 0.0.0.0:80，该错误的原因为本地80端口被占用，通过关闭80端口占用进程或修改配置文件中的端口号即可正常启动。

参考链接 ：

idea运行vue项目

用idea在本地调试时，只要运行npm run dev即可，但若将分支部署到服务器上，则需先在本地运行npm run build进行编译，然后将编译完的文件上传至git，这样用自动化集成工具进行集成时，才可从git中拉取解析后的文件并正常被web服务读取（该操作与java工程在git中只保存源码不同）。

VUE-PC端项目遇到的坑总结

其中说到跨域的话首要的就是axios的配置

主要原因是后台使用的是Multipart数组接收，vue这边使用的是formdata，红框一定要这样写，我被坑了好久，并且传输文件类的时候，不需要设置contentType，由于我用axios共同全局设置了这个 'Content-Type': 'multipart/form-data' 之后导致浏览器解析的时候，没有这个boundry（见图），最后还是用了vue-resource中的http解决的

由于后台不让前端带上角色和权限之类的信息，全部从后端拿数据，导致前端必须全部配置好所有的路由，通过后端返回的菜单信息filter出自己的菜单信息后显示

想要刷新页面就是这方法吧，挺好用

refreshPage() {

      location.reload()

    }

场景：比如商品详情数据，依赖路由的params参数获取的(ajax写在created生命周期里面)，因为路由懒加载的关系，退出页面再进入另一个商品页面并不会运行created组件生命周期，导致文数据还是上一个数据。

解决方法：watch监听路由是否变化

watch: {

  '$route' (to, from) { //监听路由是否变化

    if(this.$route.params.id){//是否有id

      //获取数据

    }

  }

}

记录app webview内嵌vue单页应用所遇到的坑

so在这个过程中无可避免的还是踩了一些坑，所以记录之，先大致说下用到的技术栈：vue全家桶（vue/vue-router/vuex）、sass、axios还有一套ui框架mint-ui，大致也就这些。下面来扒扒都遇到哪些坑。

1.vue-cli脚手架打包的项目部署到服务器上打开空白

首先可以确保路径是没问题的，vue-cli打包生产环境直接修改config目录下的index文件即可。将assetsPublicPath指向你所要放置的服务器目录，并用最后一个文件夹名作为你的项目名。如 。 那路径没问题的话。问题出在哪里呢？经过排查，是vue-router中将mode设置为'history'的缘故。由于一开始以hash模式的url是带'#'号的，本来想着让url好看点，所以用了history模式。虽然在本地调试的时候没问题，但是不部署的话还是需要后台进行相关配置的。这里百度一大堆，不赘述了，随便贴个地址， 看这里

2.webview上自带的坑

讲真的这个只能找你们移动开发的同事。比如我这边遇到的是H5页面内嵌的时候上拉下拉会出现回弹的效果，这是他们加上的，这个难免会对h5造成一些手势冲突。比如我只是想滑动底部的时间选择器来选时间，但是页面不受控制会自动上弹。还有就是定位在中部或底部的输入框，理应在弹出软键盘时自动将键盘顶上去的，这个也应该由移动端开发那边来做相关设置。

3.单页应用不重载页面导致无法调用IOS的某些回调函数

这个是真的坑。在浏览器上跑都好好的，内嵌进app的时候发现ios打开页面后一直有一朵小菊花在loading，尽管数据已经加载完成了。切换页面也一样，除非刷新页面。那问题来了，谁的锅？又是经过一系列排查，发现这个是单页应用跟移动端那边开发的控件相互作用引起的坑。（关我毛事?）那个loading控件是移动端那边用来判断webview加载情况的，在网络请求跟数据请求时都会调用打开这个控件，然而悲剧的是关闭这个控件也就是 WebviewDidFinishLoad 函数却必须是页面有进行重载才会发起调用的，也就是说loading你是开了，但是我 单页应用 怎么来都是在一个页面上操作，自然 不会重载 ，所以也就导致了那朵小菊花一直在转，这也是为什么强制刷新的话可以关闭掉loading控件的原因。这个嘛安卓那边不会有问题，所以应该是ios开发那边的问题，就算loading也应该有个时长可以关闭，或者可以写个接口通过webview的形式让前端去手动调用关闭loading控件，都是可以的。

4.es6对于一些老旧的安卓机型和浏览器的兼容问题

这个一开始还是比较头痛的，毕竟是上了线才发现的问题，陆陆续续在后台收到一些安卓机的反馈，打开活动页面一片空白。看了下大多是安卓4.4.2还有一些4.4以下的安卓机型。这尼玛vuejs不是兼容到安卓4.4吗？所以一开始以为是axios跟mint-ui的问题，但后面发现其实不是。主要原因是对es6兼容不够到位，虽然vue-cli引入了babel对js语法进行降级，但是还是有些老旧的机型会发生各种各样的问题，这里需要引入一个叫babel-polyfill的包。所以你只需只在你引入import vue之前 import babel-polyfill进来就可以了，主要是为了让es6对个别机型做到兼容。

Vue开发之坑四-return a||b 可行 return b||a报错

A、B两个组件同时调用如下子组件

因为A、B两个组件传给子组件的item值不一样，A的item中的图片路径在item.show.img, B的item中的图片路径在item.image,所以采用计算属性判断图片路径是哪一个。

但是在B组件中，报错了，A组件中没有报错。

在计算属性的两个路径的顺序调换后，即换成

后，在A、B两个组件中没有报错。

这就困惑了。

当a、b两个值为一真一假的时候，return a||b 和 return b||a 不是等值的么？为啥报错呢？

其实，初看之下，return a||b 和 return b||a 是等值不错，但问题出在a、b具体的值这里。

当计算属性判断语句为

的时候，先判断item.show.img是否为真，在B组件的调用子组件中，item.show.img不仅不存在，而且还报错，因为item.show.img为三层结构，当中间层show都不存在的时候，去找show下面的img就会报错，而不是想象中的返回false

当先判断 item.image的时候，在B组件的调用中，此时为真，所以顺利给图片路径赋值；在A组件调用的子组件中，item.image为二层结构，item下没有image，返回false，给A组件调用的子组件的图片路径赋值item.show.img

vue常见的坑的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue常见问题、vue常见的坑的信息别忘了在本站进行查找喔。