[前端面试套餐css+js+vue]第十天

CSS3新增了哪些新特性？

css，即层叠样式表的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观

css3使css的最新标准，使向后兼容的，css1/2的特性在css3里都可以使用的

选择器

css3中新增了一些选择器，主要为如下表

选择器	描述
:first-of-type	p:first-of-type:选择属于其父元素的首个< p>元素的每个< p>元素
:last-of-type	p:last-of-type:选择属于其父元素的最后< p>元素的每个< p>元素
:only-of-type	p:only-of-type:选择属于其父元素的唯一的< p>元素的每个< p>元素
:only-child	p:only-child:选择属于其父元素的唯一子元素的每个< p>元素
:nth-child(n)	p:nth-child(2):选择属于其父元素的第二个子元素的每个< p>元素
:nth-last-child(n)	p:nth-last-child(2):同上，倒数
:nth-of-type(n)	p:nth-of-type(2):选择属于其父元素第二个< p>元素的每个< p>元素
:nth-last-of-type(n)	同上，倒数
:last-child	p:last-child:选择属于其父元素最后一个子元素的每个< p>元素

新样式

• 边框
  • border-radius：创建圆角边框
  • box-shadow：为元素添加阴影
  • border-image：使用图片来绘制边款
• 背景
  • background-clip 确定背景画区
  • background-origin 图片左上角对齐方式
  • background-size 调整背景图片的大小
  • background-break控制背景怎样在这些不同的盒子中显示
• 文字
  • word-wrap单词换行
  • text-overflow 设置或检索当当前行超过指定容器的边界时如何显示
  • text-shadow能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
  • text-decorationCSS3里面开始支持对文字的更深层次的渲染
• 颜色
  • rgba，rgb为颜色值，a为透明度
  • hsla h为色相，s为饱和度，l为亮度，a为透明度

transition过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

• 过度效果
• 持续时间
• transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

transform转换

transform属性允许你旋转，缩放，倾斜或平移给定元素
transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

animation动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

• animation-name：动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画时间函数
• animation-delay：动画延迟时间
• animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
• animation-direction：动画执行方向
• animation-paly-state：动画播放状态
• animation-fill-mode：动画填充模式

渐变

• linear-gradient：线性渐变
• radial-gradient：径向渐变

其他

css3特性还包括flex弹性布局，Grid栅格布局

js：new操作符具体都干了什么？

在JavaScript中，new操作符用于创建一个给定构造函数的实例对象

流程如下：

• 创建一个新的对象obj
• 将对象与构造函数通过原型链连接起来
• 将构造函数中的this绑定到新建的对象obj上
• 根据构造函数返回类型作判断，如果使原始值则被胡罗，如果使返回对象，需要正常处理

手写new操作符

/*
 * @Author: 41
 * @Date: 2021-12-14 10:53:21
 * @LastEditors: 41
 * @LastEditTime: 2021-12-14 11:00:51
 * @Description: 
 */
function mynew(Func,...args){ 
    const obj={}
    obj.__proto__=Func.prototype;
    let result=Func.apply(obj,args)
    return result instanceof Object ? result:obj
}
// ****************************************************
function Person(name,age){
    this.name=name
    this.age=age
}
Person.prototype.say=function(){
    console.log(this.name);
}
let p=mynew(Person,'41',123)
console.log(p);
p.say()

说说你对keep-alive的理解是什么？使用场景？

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置以下props属性：

• include -字符串或正则表达式。只有名称匹配的组件会被缓存
• exclude -字符串或正则表达式。任何名称匹配的组件都不会被缓存
• max -数字，最多可以缓存多少组件实例

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated

再次进入组件时：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

使用场景

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

• 在路由中设置keepAlive属性判断是否需要缓存

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

• 使用< keep-alive>

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
      <!-- 不需要缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>