前端易忽视的知识点

1.js中的字符串数字比较大小的坑

数字字符串比较出现的问题（如'20'>'100'==true） blog.csdn.net/weixin_4581…

2.无痕模式下默认会禁止三方cookie

在无痕模式下会默认阻止第三方cookie

3.vue3使用useRoute只能初始化一次

const route = useRoute();

//模拟第二次调用useRoute
setTimeout(()=>{
console.log(useRoute())
    //这个时候useRoute会获取不到
},1000)

只能在setup方法中获取一次，之后直接调用route就好了，否则第二次调用useRoute()会获取不到

4.vue3 多个watch函数执行会有顺序

const porps = defineProps({
  modelValue: String | Number,
  option: Array,
  width: {
    default: '100px',
    type: String,
  },
});
//watch循序不能变（先获取）
watch(
  () => porps.option,
  (val) => {
    console.log('1');
  },
  { immediate: true },
  { deep: true }
);
watch(
  () => porps.modelValue,
  (val) => {
    console.log('2');
  },
  { immediate: true }
);

先打印1后打印2，对于有执行顺序的代码要注意watch的顺序

4.button按钮点击后，回车会触发按钮点击事件

5.重新设置滚动条样式

/* 滚动条 */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  display: none;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #8f959e !important;
}
/* 页面失去焦点不显示滚动条 */
::-webkit-scrollbar-thumb:window-inactive {
  visibility: hidden;
}

显示效果

6.对象直接赋值的坑

<el-input type="text" v-model="form.text"></el-input>
 data() {
    return {
      form:{},
     }
  }
  this.form = '123'

form没有初始化text字段,直接赋值由于text不是响应式的，他的值改变不会触发视图的渲染，所以修改不了input的值

6.cookie的一些问题

• 在iframe内嵌三方页面中，http请求头不会带上cookie。
• cookie没有设置过期时间字段会在话结束时清除（浏览器关闭），只有设置过期时间，cookie才不会被清除（在过期时间内）

7.get和post请求处理null和undefined

post请求不会发送undefined值， get请求不会发送null和undefined值，