近期遇到的BUG和知识点

奶牛熊
338 阅读4分钟

1.CORBS

Cross-Origin Read Blocking (CORB) 已屏蔽 MIME 类型为 text/html 的跨域响应 经常警告提示，但不影响使用

CORB 的目的是防止浏览器向网页接收某些跨源网络响应，因为这些响应可能包含敏感信息，而且现有的网页功能不需要这些响应。 src/imgurl写了一个http网址 。

例如: 它将清除一个从<script> 或者 <img> 标签发起的跨源text/html响应. 将响应的内容,用空值代替. 这是网站隔离(Site Isolation)非常重要的一部分.

2.Vue组件的is具体用法

特殊的一下父元素如里面不能包含不属于它的子元素<ul>、<ol>、<table>、<select>，而与之相对应的<li>、<tr>、<option>只可以出现在特定的父元素里面。 **非要定义一个自定义的组件放在里面在dom结构中找不到，会当做无效内容 以下其中之一来源的模板字符串没有限制：

  1. <script type="text/x-template">
  2. JavaScript 内联模板字符串
  3. .vue 组件`

如：<tr is="myTr" v-for="(item, index) in goodsArr" :key="index" :obj="item" :index="index" ></tr>

3.reduce函数的用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

1654767013469.png 常见的两种情况：

（1）数组中累加和

let s =  arr.reduce((sum,current,index)=>{
   return sum+current
},0)

(2)数组中对象的累加和

let arr = [
  {name:'jack',count:10},
  {name:'rose',count:20}
]
let s = arr.reduce((sum,current,index)=>{
  return sum + current.count
})

4.最近经常遇到的vue报错

例子一：

Property or method "XXXX" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

这个错误的解释很明确，属性“XXX”并没有在“Data”中定义，而是直接在页面初始化的过程中对其进行赋值并在页面中引用其数据 .

解决办法：最常见的是没有在data中定义直接拿来用，要不就是定义在动态渲染遍历中字母拼错了。

例子二：

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

原因：1.检查名字是否写对了 2.import xxx from "./xxx.vue" 写成了 import {xxx} from "./xxx.vue" 3.代码中有两个components,后一个的值 把前一个覆盖了 4.组件直接循环套用了

例子三：

Duplicate keys detected: '1'. This may cause an update error. 原因： key值不唯一 (虽然不影响使用)

解决: 仔细检查是否用了同一个数据循环且:key值相同，如果相同给第二个key随便加一个标记就可以，如下：:key="index + '-only'"

例子四：

Error in nextTick: "TypeError: _XXXX is not a function" 原因：百分之八十的错误都是字母拼错了

解决：仔细检查下是哪个单词拼错了

ps:如果是...undefind说明是那个东西前面出问题了

例子五：

Error in v-on handler: "TypeError: (0 , api_books__WEBPACK_IMPORTED_MODULE_1_.getBook)(...) is not a function"

原因及解决：1.可能是封装的接口名，在引入父组件使用时存在大小写写错的问题 ，找出并改过来就好 2. 接口传参没成功，如我在接口函数中传参了，但是在调用时写成了

2022-06-10_12-47-23.png

例子六

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

原因：检测到重复键：“[对象对象]”。这可能会导致更新错误

解决办法： 2022-06-10_20-40-11.png

例子七

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number with value 0, got String with value "". 报错原因：我们在子组件中直接通过v-model双向绑定了父组件传递过来的value属性，又因为props中value属性是只读的，因此就会报错了

  • 如何解决呢？答：用v-model会修改value变量的值，那么我不用v-model来绑定value变量那么就 不会报错啦。
  • 不用v-model绑定value变量那么用什么绑定呢 ？答：可以使用v-bind来绑定输入框的value属性并赋值value变量

image.png

5.find和filter的区别

共点 高阶函数：这两个函数都是高阶函数。 区别

1、通过一个测试功能 find() 返回第一个元素。

filter() 返回一个包含所有通过测试函数的元素的新数组。

2、如果没有值满足测试函数

find() 返回未定义； filter() 返回一个空数组；

avatar
文章
阅读
粉丝