第一题：说一下rem和em的区别：rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。
rem是根据html根节点来计算的，而em是继承父元素的字体。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
rem中的r意思是root（根源），这也就不难理解了。
第二题：用过弹性盒吗？
答：弹性盒子容器的属性与应用
display:flex/inline-flex
flex-direction
flex-wrap
justify-content
align-items
align-content
flex-flow
弹性盒子子项的属性与应用
order
align-self
flex
flex-grow
flex-shrink
flex-basis
弹性盒子布局
flex居中/T字布局
可动态增加导航栏
等分布局
圣杯布局
流式布局
一、弹性盒子容器的属性与应用
1.1.定义弹性盒子display:flex/inline-flex
在盒模型（box）中剖析了单个元素的盒模型结构，那么display则是用来定义盒子在文档中的模型结构，比如display:inline表示为内联元素，display:block表示为块级元素，dispaly:inline-block表示为行级块元素；还可以设置dispaly:table表示为表格等，而这篇博客是来剖析CSS3的弹性盒子，flex表示为弹性块级盒子，inline-block表示为行级块盒子，这两者的区别与块级元素和行级块元素是一样的，就是于相邻元素的排列方式不同。
注：display在CSS属性中被分类为布局，与float、clear、visibility、overflow划分为同一类别的属性，但是在这个分类中都是首先基于display的展示行为为基础，才有浮动，清除浮动，是否可见，溢出处理等状态。所以display作为布局的核心功能，除了定义外部的元素与元素之间的排列方式，从CSS2到CSS3更是通过扩展display的参数由原来内部固定的结构模型扩展到了可自定义的结构模型，就是弹性盒子flex。
在弹性盒子中，原来的margin,pading,content还有width的内部计算方式都不在基于浏览器内核默认的模型来计算，而是通过与flex相关的一系列属性来定义计算盒子内部项（内部元素）的排列布局。这部分CSS内容对应着浏览器内核渲染页面时内部调用的layout()方法。可以这么来说，原来的layout()直接通过识别块级元素、行级块元素、行级元素、表格这四种固定实现的布局模型直接调用固定的计算模型计算出元素在页面中展示的(结构)样式，而CSS3中的flex布局模式则需要浏览器内核调用自定义的flex相关参数来展示元素的(结构)样式
第三题:undefined 和null的区别：
答：目前，null和undefined基本是同义的，只有一些细微的差别。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
Object.getPrototypeOf(Object.prototype)
// null
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
var i;
i // undefined
function f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined
第四题：Vue，组件之间的传通性有哪些方法？
答：. vue父子组件通信
vue父子组件通信可以用Vue.$emit自定义事件来解决。
// 父组件
<single-address @edit-address="editAddress">
// 子组件
methods: {
editAddress () {
this.$emit('edit-address', false)
}
}
当然也可以使用props方式解决。
// 父组件
// 子组件
{{ addressitems.partment }}{{ addressitems.address }}
export default {
props: {
addressitems: Object
}
}
二. 非父子组件通信
非父子组件通信同样也可以用Vue.$emit自定义事件来解决
var bus = new Vue()
// 组件A
bus.$emit('id-selected', 1)
// 组件B
bus.$on('id-selected', function (id) {
console.log(id)
})
三. vue跨组件跨模块通信
虽然父子组件，非父子组件间的通信vue都可以有办法解决，但是如果项目结构复杂化以后，这样的自定义事件变多以后代码难以管理，所以还是建议使用vuex。
接下来就讲一讲vuex这个东西吧。vuex，官方的说法就是Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。如果之前没有接触过应用状态管理这一块的内容的话，可能光看文档是很难看明白的。按个人的理解来说，vuex最大的作用就是把部分父子组件之间频繁的通信过程简单化，所以，对于一些父子组件通信并不频繁的情况来说，并不应该使用vuex，当然这也意味着，如果你对父子组件之间的通信还不是很明确的话，可以先学习一下这一块的知识。
vuex有四个核心概念，其中state和getters主要是用于数据的存储与输出，而mutations和actions是用于提交事件并修改state中的数据。
也是以购物车的业务来举例，首先由于vue的限制，页面中所有的数据都需要一个初始化，这样才能在之后业务逻辑中响应式地修改数据（修改数据的同时变化页面内容）。这里我们可以在vue组件中使用ajax获取数据，获取到的数据直接赋给state中的数据：
// global.Domain.centerUrl是我自己定义的全局变量，这种就可以更方便的管理前端数据请求接口的地址了
getDataFromBackend () {
this.$http({
method: 'get',
url: global.Domain.centerUrl + 'order'
}).then(function (response) {
let res = response.data
// state.order是因为我对整个应用进行了分模块的设计，order是我其中的一个模块，后面会讲如何划分模块
// $store是vue实例的全局属性，这个属性可以直接获取vuex状态树中的所有state数据
this.$store.state.order.orderitems = res.orderitems
})
}
getters的用法与计算属性基本一致，computed会用的话那这个也基本就会用了。
接下来就是重头戏mutations了。mutations原意是突变，这里可以理解为立即修改吧。也就是说，mutations可以修改state中的数据，但是有一个限制，那就是只能同步修改，而不能异步，你想要按个定时器过2秒钟修改state，那对不起了您哪，不行。但是，想要异步修改state，也不是不行，光靠mutations一个人是不行的了，还得要靠actions，而且actions还不能直接操作state，他需要异步提交给mutations，然后再由mutations同步修改state数据。听上去挺麻烦的一件事情啊，还是直接看代码吧。
mutations: {
correctIfcollect (state) {
state.ifcollectwrap = true
},
modifyIfcollect (state) {
state.ifcollectwrap = false
},
// 收藏成功事件
collectSuccess (state) {
state.ifcollect = true
state.collectmsg = '收藏成功'
},
// 取消收藏事件
collectCancel (state) {
state.ifcollect = false
state.collectmsg = '取消收藏'
}
},
actions: {
// actions有一个必要的参数commit，用于提交事件到mutations中
collectPopup ({commit, state}) {
let oTimer = ''
clearTimeout(oTimer)
if (!state.ifcollect) {
commit('collectSuccess')
commit('correctIfcollect')
oTimer = setTimeout(function () {
commit('modifyIfcollect')
}, 2000)
} else {
commit('collectCancel')
commit('correctIfcollect')
oTimer = setTimeout(function () {
commit('modifyIfcollect')
}, 2000)
}
}
}
// 假如有数据需要从组件传到actions中时，需要两个大括号，第一个大括号放commit或者state这类vuex参数，而第二个大括号放传进来的参数
// 这里使用vuex actions调用了两个mutations的方法实现一个功能，是因为第二个函数中有一个参数是需要第一个函数提供的
changePos ({commit}, {index}) {
commit('changeHandle', index)
commit('changePos', index)
}
总的来说，在我看懂了vuex以后，我总是觉得有一个vuex来分担一下data的功能那是再好不过了，这样不光能够更好地管理我的应用，同时也能够提高我.vue单文件的可读性。
那么这里就有一个问题了，我们都知道一个稍微大一点的项目，那数据量都是很多的，如果整个项目里的数据都写在一个vuex文件里的话就显得整个文件太大太重了，这与我们想要提高文件的可读性是相悖的。所以我们需要有一个分模块的意识来管理vuex，管理应用的状态。
而vuex也正好提供了这个功能（vuex还真的是够强大），在具体使用的过程中，我会先把那些需要与其他组件交互的组件中的数据都提取出来放到vuex里面管理，而那些完全没有交互的数据还是放在组件的data中，例如标识该组件的标题数据等等。然后，这里我们就可以用到vuex的模块管理功能，愉快地把数据按照组件之间的功能联系来分离，并把它们拆分到一个个小文件中啦。
// 这是vuex总的管理文件，将各模块统一在一起，从而将每一个分支都连接到vuex这个总的状态树上
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 引入应用状态管理
import goodshandleStore from './goodshandle'
import orderStore from './order'
import addressStore from './address'
import shopcarStore from './shopcar'
import merchantStore from './merchant'
import couponStore from './coupon'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
handle: goodshandleStore,
order: orderStore,
address: addressStore,
shopcar: shopcarStore,
merchant: merchantStore,
coupon: couponStore
}
})
网友评论