vue中遇到的面试题

原创已于 2022-04-05 23:57:12 修改 · 743 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue面试题

于 2022-04-05 23:55:40 首次发布

css 中权重优先级最高的是什么？

选择器的权重值

id选择器的权重为 100
标签选择器的权重为 1
class选择器的权重为 10
内联选择器的权重为 1000

!important优先级是最高的

<!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>
      div {
        color: yellow !important;
      }
      .title {
        color: blue;
      }
      .text {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div id="title" class="text" style="color: red">css权重优先级</div>
  </body>
  <script></script>
</html>

js 中的真假值

在 js 中假值有0、false、null、''、undefined、NaN

  <script>
    console.log(Boolean(0)); // false
    console.log(Boolean(false)); // false
    console.log(Boolean("")); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    console.log(Boolean(NaN)); // false
  </script>

在 js 中真值有 true、[]、{}

  <script>
    console.log(Boolean(true)); // true
    console.log(Boolean([])); // true
    console.log(Boolean({})); // true
  </script>

vue 面试题

1. `v-if`和`v-show`区别

1.1 区别一：展示的形式不同

v-if是创建一个 dom 节点

当 isShow 为 false 时

<template>
  <div class="home">
    <h1 v-if="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: false, 
    };
  },
};
</script>

在这里插入图片描述

当 isShow 为 true 时

<template>
  <div class="home">
    <h1 v-if="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: true, 
    };
  },
};
</script>

在这里插入图片描述

v-show 是 display:none、block

当 isShow 为 false 时

<template>
  <div class="home">
    <h1 v-show="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

在这里插入图片描述

当 isShow 为 true 时, 没有变化还是正常的创建标签。

<template>
  <div class="home">
    <h1 v-show="isShow">小鹿</h1>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

在这里插入图片描述

1.2 区别二：使用场景不同

初次加载v-if要比v-show好，页面不会多加载盒子。
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小。

2.`scoped` 原理

2.1 作用：

让样式在本组件中生效，不影响其他组件。

当没有给style样式添加 scoped

在 home.vue 里面

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>
export default {};
</script>

<style>
h1 {
  color: red;
}
</style>

在 about.vue 里面

<template>
  <div class="about">
    <h1>其他</h1>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

在这里插入图片描述

2.2 原理：

给节点新增自定义属性，然后 css 根据属性选择器添加样式。

给 home.vue 添加了 scoped 后

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

在 about.vue 里面

<template>
  <div class="about">
    <h1>其他</h1>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

在这里插入图片描述

标签

#vue #前端

vue中遇到的面试题

css 中权重优先级最高的是什么？

选择器的权重值

js 中的真假值

vue 面试题

1. v-if和v-show区别

1.1 区别一：展示的形式不同

1.2 区别二：使用场景不同

2.scoped 原理

2.1 作用：

2.2 原理：

1. `v-if`和`v-show`区别

2.`scoped` 原理