ms_一口气能看完不吃灰的前端小知识

最新推荐文章于 2024-07-31 14:35:30 发布

JianZhen✓

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量273

点赞数 5

分类专栏：面试大全文章标签：前端 javascript vue.js 前端框架 ecmascript github git

本文链接：https://blog.csdn.net/aZHANGJIANZHENa/article/details/131805159

版权

面试大全专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、get请求与post请求的区别

get请求不会修改服务器的资源，post请求反之

post请求一般是通过请求体传参，而get请求是通过查询字符串传参

2、vue3的watch

监听响应式数据对象类型的变量时，需要开启deep模式才能监听到对象里的key值变化与否，否则就精准化监听到对象里具体的key

3、vue3的watch和computed

都算是监听，watch是监听变量值的变化，computed是值变化才会触发进行重新计算。

4、reactive定义的响应式数据是“深层次的”

内部是基于ES6的proxy实现的，通过代理对象操作源对象内部数据进行操作

5、vue3的watchEffect函数

是像watch和computed的一种结合，不必指明监听什么，当函数方法内调用的某些变量的值改变就触发了，也不用像computed一样必须有个返回值

 watchEffect(() => {
                const a1 = sum.value
                const b2 = job.j1.salary
                console.log('值发生变化就执行watchEffect')
            })

6、获取首屏时间（页面打开后完全加载完毕消耗的时间）与白屏时间（页面刚打开还没加载出页面内容时的白屏时间）

总的来说就是要用到浏览器自带方法performance，在项目的html页面head头部标签和body主题标签内写js方法（当前时间的时间戳减页面加载完成时间的时间戳）输出查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    <script>
        // 获取首屏时间
                console.log(new Date().getTime() - performance.timing.navigationStart);

    </script>
</head>
<body>

    <div class="modal">
      
    </div>
    <script>
        //获取白屏时间
                console.log(new Date().getTime() - performance.timing.navigationStart);

    </script>

</body>
</html>

7、数组多维转一维并去重

Array.from(new Set(value2.join(',').split(',')))

8、多次点击打开同一个标签页

在已有同路径标签页打开页面

      const { href } = this.$router.resolve({
        path: '/page',
        query: {
         
        }
      });
      // window.open(href, "_blank");//在新标签打开页面
            window.open(href, "在已有同路径标签页打开页面");//第二个参数随便写，写啥都行，别写关键字就行