移动端前端面试题

px, rpx, rem转换
Vue父组件嵌套子组件生命周期
不知道子div宽高，上下左右都居中
mixin作用，参数，有重复的method，使用哪个?
5.Vue filter作用，用法
6.Vue组件全局注册

另外:
项目截图发给面试的人

答案:

设计师以iphone6为标准出设计稿的话，1rpx=0.5px=1物理像素
【分辨率】分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334.
【物理分辨率】是硬件所支持的分辨率，【逻辑分辨率】是软件可以达到的分辨率。
物理分辨率 / 逻辑分辨率 = 像素倍率dpr，也就是常说的几倍屏。

iphone6的分辨率写着375667，这里指的就是它的逻辑分辨率。我们上面提的7501334则是它的物理分辨率。所以iphone6的像素倍率=（7501334）/（375667）=2

image.png

【px】像素, 作为图片采样的基本单位

【rem】rem是根据html的fontsize去动态计算实际的px的。

所以常常应用这点，做反向使用。即根据屏幕大小动态的设置fontsize.来达到不同的分辨率下有一样的效果。

【rpx】rpx其实是微信对于rem的一种应用的规定，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。

所以在微信小程序中1rem=750/20rpx。

如果以iphone6为标准，并且在iphone6上将fontsize设置成62.5%。那么1rem就等于10px，我们只要将设计师标注的尺寸（一般标注的是物理分辨率）除以20就可以得到单位为rem的数值了。

在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

在iPhone6上，1rpx=1物理像素=0.5px。

创建的时候，子组件创建过程，夹在父组件的 beforeMount, mounted之间。
销毁的时候，子组件销毁过程夹在父组件的beforeDestroy， Destroyed之间。
示例代码参考: https://www.jianshu.com/p/768d0d1aaf90

给外层div设定如下css，关键是这3条规则:
display: flex;
justify-content: center; /* 水平居中 /
align-items: center; / 垂直居中 */

外层必须有高度，内层不需要高度
考察flex布局: [https://www.runoob.com/w3cnote/flex-grammar.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>box</title>
    <style>
        div {
            border: 1px solid #ccc;
        }
        body {
            font-size: 200px;
        }
        .container {
            display: flex;
            /*flex-wrap: wrap;*/
            /*flex-direction: column;*/
            justify-content: center;  /* 水平居中 */
            align-items: center;   /* 垂直居中 */
            width: 100%;
            height: 400px;
        }
        .inner {
            background-color: #2b2b2b;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="inner">
        x
    </div>
</div>
</body>
</html>

效果:

image.png

mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
filter中写模板中变量，处理函数。在模板中用 | 管道符号调用
先import，然后在components中声明要依赖的组件