2022.8.10面试问题html 1. 谷歌浏览器怎么设置字体小于12px 因为浏览器的限制，网页上的字体最小只能设置

html

1. 谷歌浏览器怎么设置字体小于12px

因为浏览器的限制，网页上的字体最小只能设置12px，因为小于12px就会影响浏览效果
但是有时候我们需要将字体设置的很小这就需要用到特殊的手段
这里就要用到 transform属性设置

注：应该还有更好的方法，

  
  p {
    font-size: 12px;
    display: inline-block;//转化为块元素
    webkit-transform: scale(0.833)//进行缩放
   }

2.H5中新增了哪些新东西

Canvas绘图以及SVG绘图。
拖放（Drag and drop）API
语义化标签（header、nav、footer、article、section）
音频、视频（audio、video）API
地理定位（Geolocation）
本地离线存储（localStorage）,长期存储数据，关闭浏览器后不丢失。
会话储存（sessionStorage）,数据在关闭浏览器后自动删除。
表单控件（calendar、date、time、email、url、search）
新技术如Web Worker、Web Socket
(iframe) 用于在网页内显示网页,iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

3.cookie与sessionStorage和localStorage的区别

1、cookie在浏览器与服务器之间来回传递
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存。

2、数据有效期不同
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage 始终有效，长期保存。

3、cookie数据还有路径的概念，可以限制cookie只属于某个路径下
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

4、作用域不用
sessionStorage不在不同的浏览器窗口中共享
localStorage在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

css

1.css3新增了哪些

圆角（border-radius）
阴影（box-shadow）
文字特效(text-shadow)
线性渐变（gradient）
变换(transform)
更多的CSS选择器
更多背景设置（background）
色彩模式（rgba）
伪元素（::selection）
媒体查询（@media）
多栏布局（column）
图片边框（border-image）

2.清除浮动的方式有哪些

给浮动元素的父级元素设置overflow:hidden;
在浮动元素的同级下添加一个空标签，并且设置clear:both;
浮动元素的父级元素使用::after{clear:both;content:'';display:block;}

3.css选择器的执行顺序

!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

4.css中有哪些单位

绝对长度单位：px
百分比: %
相对父元素字体大小单位: em
相对于根元素字体大小的单位: rem
相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw
相对于视口*高度的百分比（100vh即视窗高度的100%）: vh

5.display有哪些常用属性

1、display：none
表示此元素不会被显示，不占空间的隐藏
1、display：block
块元素，独占一行
display：inline
行内元素，前后没有换行符，和其他元素在同一行上
display：inline-block
行内块元素，具有独占一行没有换行符的特性

6.设置透明色

1、通过backgroud和opacity设置背景颜色透明

<div class="box"></div>

.box{ 
     width:300px; 
     height:200px; 
     margin:0 auto;
     border:1px solid #ccc;
     background:red; 
     opacity:0.2; 
     }

2、通过rgba方式设置背景颜色透明

.title_div{ 
      width: 200px; 
      height: 200px;
      line-height: 30px; 
      text-align: center;
      margin:0 auto;
      background-color:rgba(220,38,38,0.2);
      }

7.样式穿透

/keep/

js

1.数据类型

基本数据类型

Number:数值，包括整型和浮点型。
String:字符型。
Undefined:未定义，声明变量时未赋值。
Null：定义为空或者不存在。
Boolean：布尔值，true or false。
Symbol：独一无二的值。

引用数据类型

Object：对象。
Array：数组。
Function：函数。

2.unll和undefind的区别

unll表示什么都没有，undefind表示未定义

3.深浅拷贝

浅拷贝就是通过赋值的方式进行拷贝，赋值的方式只会把对象的表层赋值给一个新的对象，如果里面有属性值为数组或者对象的属性，那么就只会拷贝到该属性在栈空间的指针地址，新对象的这些属性数据就会跟旧对象公用一份，也就是说两个地址指向同一份数据，一个改变就会都改变。

深拷贝则不会出现上述问题，引用数据类型，地址跟数据都会拷贝出来。

4.如何实现一个深拷贝

1.JSON.stringify()

**JSON.parse(JSON.stringify(obj)) **是目前比较常用的深拷贝方法之一，它的原理就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象。
这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined，symbol，当使用过JSON.stringify()进行处理之后，都会消失。

2，使用for … in遍历复制

3.Object.defineProperty 与forEach遍历复制

vue

1.vue的声明周期

beforeCreate：创建前。此时，组件实例刚刚创建，还未进行数据观测和事件配置，拿不到任何数据。
created：创建完成。vue 实例已经完成了数据观测，属性和方法的计算(比如props、methods、data、computed和watch此时已经拿得到)，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空数组常用于简单的ajax请求，页面的初始化。
beforeMount：挂载前。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM）。编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
mounted：挂载完成。也就是模板中的HTML渲染到HTML页面中，此时可以通过DOM API获取到DOM节点，$ref属性可以访问常用于获取VNode信息和操作，ajax请求，mounted只会执行一次。
beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，不会触发附加地重渲染过程。
updated：更新后。在由于数据更改导致地虚拟DOM重新渲染和打补丁之后调用，
beforeDestroy;销毁前。在实例销毁之前调用，实例仍然完全可用。（一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件）
destroyed：销毁后。在实例销毁之后调用，调用后，vue实列指示的所有东西都会解绑，所有的事件监听器会被移除。
其他：
activated：在keep-alive组件激活时调用
deactivated：在keep-alive组件停用时调用

2.vue中怎么获取dom

1.给相应的dom元素加“ref="name"”，使用“this.$refs.name”获取该元素。

2.给相应的dom元素加id，使用“document.getElementById("id")”语句获取该元素；

3.v-if和v-show的区别

相同点：

都能控制元素的显示和隐藏

不同点：

v-if是直接销毁和重建，切换开销大
v-show是通过控制css的display来实现显示或隐藏，适用于频繁切换的场景

4.v-if和v-for谁的优先级更高

！！！不推荐同时使用v-if和v-for
当v-if和v-for一起使用时，v-for的优先级更高

5.vue中的修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
.sync 当我们想要在父组件和子组件之间对某个属性值进行双向绑定时,有什么便捷的方式？是的只要.sync修饰符即可办到

注：.sync感觉使用的非常多

6.v-for中为什么要加key

为了性能优化，因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。 key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了。

7.Vue 中 $nextTick

异步渲染、获取DOM、Promise等。

Vue 在更新 DOM 时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。 $nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。 n e x t T i c k 的原理： nextTick的原理：nextTick的原理：nextTick本质是返回一个Promise 。

应用场景：

在created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中。
在data()中的修改后，页面中无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面

8.vue组件传值

父子组件
props emit/parent/$ref/$attrs
兄弟组件
$parent/$root/eventbus/vuex
跨层级关系
eventbus/vuex

9. computed和watch的区别？

computed值有缓存、触发条件是依赖值发生更改、 watch无缓存支持异步、监听数据变化

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值； watch：更多的是观察的作用，支持异步，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算； watch应用场景：需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

2022.8.10面试问题