学习vue路上的错误总结：

错误总结

代码中报错信息：Invalid character
输入了不正确的标点符号（正确应英文状态下输入）

创建脚手架vue create xxx -> cd xxx -> yarn serve

启动服务的时候出错啦：

错误原因：主文件App.vue中引用了logo图片和Hello World.vue文件，然后在yarn serve启动服务之前我提前删除了这两个文件，App.vue找不到导致运行服务时报错

解决办法：删除App.vue中引入文件的两个地方即可 (清除欢迎页面的文件，且App.vue文件中删除引入的前面删除的文件

删除后如下，再运行命令yarn serve就成功啦！

运行成功后的界面

注意：拿到模板脚手架，删除不需要的东西（logo、.vue）再yarn serve启动服务

当打开被人的项目时在项目所在的路径下启动服务报错（原因：没有node_modules文件）

解决：在项目所在的文件路径下执行 yarn 命令

node_moudule会根据package.json中记录的版本自行下载第三方模块包

一般拿到别人的项目时, 缺少node_modules，会根据当前项目package.json记录的包名和版本，项目所需要的所有第三方包依赖全部下载到当前工程中
在正确的路径下，执行命令：yarn

在正确的路径下启动终端，执行命令：yarn 即可

案例：小选影响反选，反选影响小选

若以后遇到类似的报错类型：xxx is not undefined
①. 代码中语法或变量错误
②. vue中使用了this. 获取数据会导出报错

 

xxx is not undefined | xxx of undefined

一般情况下：变量名写错了或调用方法的数组名|对象名|函数名写错了噢

如下报错信息：属于同种类型的错误

再比如以下所犯的同类型的低级错误

vue中使用this获取变量的地方：
data、methods中的所有方法名、computed中的变量名

根据控制台报错信息找错误，如下

总结：key作用
无key属性，和有key属性（值为索引），v-for更新时，尽可能就地复用标签，对比差异，只更新变化的
有key（值为id）,v-for更新时，用key来对比新旧DOM，会提高"更新"的性能
key值要求：唯一不重复，数字或字符串
结论：
①. key属性提高更新时，性能，dom变化后用key来对比找出差异，更新真实DOM
②. key的值要么用id，没有id用索引

注意箭头函数的使用情况：(形参) => {函数体}
只有一个形参的时候：可以省略()
只有一句函数语句的时候，可以省略，且有 return 返回结果的功能（此种情况可以不写 return）

数据改变DOM更新是异步的
解决：this.$nextTick -> 等到DOM更新后，再执行里面的代码
$nextTick()--局部 -> 等待DOM更新后再执行一段代码，放入$nextTick函数中 -> 立刻获取真实DOM的值

ESLint的规范

规范文档: 规则 | Rules_Eslint_参考手册_非常教程

规范文档2: https://standardjs.com/rules-zhcn.html

规范文档3: List of available rules - ESLint中文

更多的规则可以参考这里: VSCode常用插件之ESLint使用 - 较瘦 - 博客园

使用ESLint需要注意以下问题：

 使用ESLint代码检查工具错误提示有：

 ​​​​​​ESLint提示错误

注意：把违反的规则在.eslintrc.js文件中关掉之后，一定要重新 yarn serve 重启服务，否则终端还是会报错（改了src以外的内容，必须重启服务，否则还是会有错误显示）

错误解决后不再报红

await：ES8的关键字

作用：用来取代then函数的（成功的结果）

注意：一旦await后面Promise报错，代码就不会往下执行了

 

style标签中加上 scoped属性后会使得修改第三方组件内的class样式不成功

try { }  catch( )--捕获异常

 

注意区别：

按需导出和默认（default）导出
按需 {}导入和默认导入

下载第三方模块包引入方式：

如：
import $ from 'jquery'
自定义的文件引入方式：含有路径
import "./css/index.css"

以下错误与上面大同小异

关于HTTP状态码的错误去Network中查看

错误码：404

404页面就是当用户输入了错误的链接时，返回的页面（HTTP 404 错误意味着链接指向的网页不存在） 

问题：图片上传不成功，错误为404状态码

404：就是当用户输入了错误的链接时,返回的页面。HTTP 404 错误意味着链接指向的网页不存在,即原始网页的URL失效

 修改后：

 

500： 服务器遇到错误，无法完成请求（服务器内部错误） 

请求参数：

 

未传入参数导致报错：可以通过问后端人员或者查看接口文档

注意：
涉及到接口的地方：务必仔细阅读其--接口地址、请求参数等需要传入的数据

 

问题解决如下：

因为使用的Element-ui中的标签，因此查看Element-ui文档找参数

401：服务器响应结果为token超时

错误：一个现实"xxx is not undefined"，另一个显示如下错误，

错误原因：

内部嵌套错误，下面定义的变量访问不到上面使用了该方法

定义的方法在调用时漏写()

按需导出没有使用 { }接收

报错类型：访问端口服务错误

this.$refs.xxx：获取xxx标签组件

 改正后：

参数名写错导致找不到传入的数据

 

计算属性中的值需要使用 return 返回出去

只有返回值
computed: {
 计算属性名() {
    // 它也是一个变量(所以不能和data里的变量重名)
    // 给这个计算属性使用
    必须return 值
  }
}

完整写法
computed: {
 计算属性名: {
   set() {},  //有人给计算属性变量"赋值"的时候，自动触发此函数（页面上给变量赋值发生改变时，导致set触发）
   get() {}  //有人要"使用"计算属性变量值的时候，自动触发此函数斌必须return值（把数据传给页面使用的时候）
  }
}

 

方法和组件出现嵌套，导致出错

正确是：并列关系

 .vue后缀有无的时候报错情况

使用外面封装的方法，由于引入的路径不对，在调用该方法时导致报错

 程序进入死循环：去路由守卫中检查代码

async+await：
1、async 函数执行后，总是返回了一个 promise 对象
2、await 所在的那一行语句是同步的

async 关键字声明了一个 异步函数，这个 异步函数 体内有一行 await 语句，它告示了该行为同步执行，并且与上下相邻的代码是依次逐行执行的。

改正后：

少见的错误：

调用定义的接口api没有传入id值：

传入id值：查询数据成功

表单自定义验证：

兜底验证时：给表单取别名：ref='xxx'

时间格式化：

在组件内定义作用域插槽，访问 prop变量值

span标签中：管道运算符 前面是传入给过滤器方法的值，管道后面是 过滤器方法

 错误详情：

 原因：把filter方法放在了methods中：

改正：

 导出Excel：格式化为后端所用的数据格式

 成功结果：

根据接口文档要求：

 Excel导出：

读取不到某个xxx的属性时，说明该方法前面的内有误

 

映射函数 mapState、mapGetters放到computed中

映射函数 mapMutations、mapActions放到methods中

在进行表单校验的时候，封装好的组件使用属性绑定位置不对应

 

this.$set()：设置响应式数据