2021.12遇到的知识点总结

1.将url查询字符串转为对象

Object.fromEntries(new URLSearchParams('?foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }

2.对象和map的互相转换

const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }

3.process.env.NODE_ENV

process.env.NODE_ENV 是用来区分本地开发环境和打包后的环境的。
development 开发环境，production 生产环境

4.实例方法 vs 静态方法

静态方法：类和属于类的方法可以直接调用的方法，可以用类名.方法名调用
实例方法：实例化类后的对象的调用方法

5.类数组对象

类数组对象的本质特征只有一点，即必须具有length属性。

6.arr.at()

数组不支持负索引，因为[]不仅用于数组还可以用于对象，对于对象来说，[]里面的是键名，所以数组的[]里面不能是负数。
新提案：arr.at()可以传一个负数的参数。

7.str.padStart

补全字符串，可以用来补全时间格式或提醒字符串格式

day.padStart(2, '0')

'09-12'.padStart(10, 'YYYY-MM-DD')
 // "YYYY-09-12"

8.el-popover的弹出框位置

如果el-popover高度过高或位置在页面边缘，会导致页面出现滚动条，解决办法：
设置位置不合适时的替代选项fallback-placements

9.vue3的computed传入参数

const x = computed(() => (val) => val + 1)

10.vue3中声明响应式对象的ref和指向dom引用的ref

const ref1 = ref(null)
const ref2 = ref('a')

<div ref="ref1"></div>

ref2.value = 'b'

11.css选择器之如何选择除最后一个元素外的其他元素

.tag:not(:last-child){} // 除最后一个元素外的其他元素

.tag:not(:last-child)::after {} //除最后一个元素外的其他元素的after伪元素

12.v-model参数

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

13.引入类型

XXX only refers to a type, but is being used as a value here

import { XXX } from 'xxx';
改为：
import type { XXX } from 'xxx';

14.template与v-show

template上不支持使用v-show，可以用v-if

15.按键修饰符.number

<input v-model.number="age" />

如果输入的是“12a”，显示的只有“12”，
如果输入的是“a12”，显示的还是“a12”，数字前面的字符串不能被过滤。

16.Date对象

如果要判断x分y秒是否大于a分b秒，可以先用new Date()转换成日期类型，然后再用>运算符判断。
如果需要判断x分y秒是否在a分b秒和c分d秒区间内，转换成Date类型也很方便判断。

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

17.对象转换成url参数字符串

var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
其他URLSearchParams参数类型：
// Pass in a string literal
var url = new URL('https://example.com?foo=1&bar=2');
// Retrieve from window.location
var url2 = new URL(window.location);

// Retrieve params via url.search, passed into ctor
var params = new URLSearchParams(url.search);
var params2 = new URLSearchParams(url2.search);

// Pass in a sequence
var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);

// Pass in a record
var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});

18.vue3获取子组件dom结构和属性、方法

在子组合中需要用defineExpose定义暴露出的属性、方法

// 子组件
<div ref="a"></div>
const a = ref()
function test(){}
defineExpose({
    a,
    test
})

// 父组件
<son  ref="b"></son>
const b = ref()
onMounted(() => {
    console.dir(b.value.a)
    b.value.test()
})