学习vue路上的错误总结：

云揽星河_

已于 2022-02-24 09:00:14 修改

阅读量645

点赞数 2

文章标签： vue

于 2021-09-25 21:57:10 首次发布

本文链接：https://blog.csdn.net/m0_48862284/article/details/120469416

版权

错误总结

代码中报错信息：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用索引

<template>标签中至少且只能有一个根标签</template>

注意箭头函数的使用情况：(形参) => {函数体}
只有一个形参的时候：可以省略()
只有一句函数语句的时候，可以省略，且有 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值（把数据传给页面使用的时候）
}
}