面试前端开发岗位被问父子组件和响应式布局（问到就是赚到篇一）

因为最近在求职，所以用博客给自己记录一下get到的点

面试被问父子组件和响应式布局(问到就是赚到)

今天面试前端开发岗位被问到了父子组件和响应式布局，这里总结一下
先说响应式

响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。
优点
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题
缺点
仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况响应式与自适应区别
响应式：只需要开发一套代码。 响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。自适应：需要开发多套界面。 通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面。
好的，废话不多说开始正文

媒体查询

被问到响应式布局，我的第一反应就是媒体查询和那个UI组件bootstrap
使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

@media screen and (max-width: 960px){
 body{
 background-color:#FF6699
 }
}

@media screen and (max-width: 768px){
 body{
 background-color:#00FF66;
 }
}

@media screen and (max-width: 550px){
 body{
 background-color:#6633FF;
 }
}

@media screen and (max-width: 320px){
 body{
 background-color:#FFFF00;
 }
}

上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

rem

这个就是面试官主要想问我的，我也只是做项目的时候不用px用这个，但我已然忘了它是什么原理，只知道是字体大小然后。。。
rem单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

@media screen and (max-width: 414px) {
 html {
 font-size: 18px
 }
}

@media screen and (max-width: 375px) {
 html {
 font-size: 16px
 }
}

@media screen and (max-width: 320px) {
 html {
 font-size: 12px
 }
}

利用rem和媒体查询，在分辨率发生变换时，给它不同的font-size。

优化版

/动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

理解：上面代码实现了，无论设备可视窗口如何变化，始终设置rem为width的1/10.即实现了百分比布局。就没有第一版的媒体查询那样僵硬。

OK，当然布局方法还有很多，我的初步总结就到这里

原文链接在这，我只做学习总结

VUE组件的父子组件

在我学习过程中，只是单纯的学习到父子传参，子父传参，兄弟传参如何去传， 而面试官问到我子组件如何去改变父组件的参数
还好我有做过了解
这就就涉及到一个单项数据流的问题，学vue我们听到最多的就是双向绑定，那么初学的小伙伴就对这个单项数据流不太了解，

单项数据流

父级的prop的更新会向下传递流动到子组件，但是反过来不行，而事件向上传递，
父组件通过prop给子组件下发数据子组件通过事件给父组件发送信息

既然子组件无法获取父组件的变量，那就让父组件自己修改自己的数据–>子组件调用自己的方法，该方法中调用this.$emit方法用来通知父组件“你该去修改你的变量啦”

可以通过在子组件中调用this.$emit方法，这个方法会通知父组件

components:{
            mycom:{
                template:'<input type="button" value="这是子组件按钮，用来触发父组件方法从而修改父组件的变量" @click="myshow">',
                //通过点击子组件的按钮来触发子组件的myshow方法
                methods:{//子组件的myshow方法触发父组件的函数（第一个参数用来触发父组件的方法，第二个参数是父组件方法的参数）
                    myshow(){
                        this.$emit('fun','子组件修改了')
                    }
                }
            },

你以为这就结束了吗？继续

父组件如何直接调用子组件的方法

 父组件： 在子组件中加上ref即可通过this.$refs.ref.method调用

原文链接

父组件的值改变后，如何让子组件也跟着刷新

这里需要注意的是，我百度全是告诉我用watch去监听值的变化
但是面试官说的是sync我可能没理解透彻
多方资料查找以后得知
wepy的props传值分为静态传值和动态传值，静态传值比较简单，只能传递String字符串类型，不需要修饰符；动态传值需要使用.sync修饰符，如果想子组件向父组件传值，可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了，具体详细介绍看wepyjs prop传值。
  wepy在项目开发中发现在父组件onload中请求数据，更新.sync动态传值绑定的数据，子组件onload中获取不到值。
原文链接
后期学习会对此文进行补充