wql面试要点

flex 弹性布局

flex要点
flex:1的理解
采用Flex布局的元素，称为Flex容器，简称容器。它的所有子元素自动成为容器成员，称为Flex项目，简称项目。
对于某个元素只要设置了display:flex的设置，那么这个元素就是弹性容器，具有了flex弹性布局的特性。
每个弹性容器都有两个轴，主轴和交叉轴，两轴成90度角；
每根轴都有起点和终点，这对于元素对齐是很重要的；
弹性容器的所有子元素都成为弹性元素，弹性元素永远沿着主轴排列；
每个弹性元素都可以采用display:flex的设置来设置成为另一个弹性容器，与之形成嵌套关系，所以，一个元素既可以是弹性容器，也可以是弹性元素。
容器 属性：
display:flex
flex-direction:row|row-reverse|column|column-reverse
jusity-content:flex-start(默认) flex-end center space-between space-around space-evenly
align-items:stretch(默认) flex-start flex-end center baseline
align-content :stretch（默认）flex-start flex-end center space-between space-around space-evenly
flex-wrap: nowrap(默认) wrap wrap-reverse
flex-flow:row nowrap
元素属性/项目属性：
order 0
flex-grow:0
flex-shrink:1
flex-basis:auto
flex:1

flex-direction

每个弹性容器都有两个轴，主轴和交叉轴，主轴和交叉轴成90度角，水平的轴不一定是主轴
flex-direction 是控住主轴的方向
默认值是row，主轴是x轴，交叉轴为y轴
若轴为coulmn，则主轴为y轴，交叉轴为x 轴

justify-content

justify-content 主要控制主轴上的元素也称其为项目的排列方式
其值为 fex-start flex-end center space-between space-around space-evenly

align-items

align-items 主要控制交叉轴上的排列方式
其值为：stretch flex-start flex-end center baseline

align-content

align-conten 是主要控制垂直方向的排列的
主要前提条件父容器：
display:flex;
flex-direction:row;
flex-wrap:wrap;
其值：stretch flex-start flex-end center space-between space-around space-evenly

order

order 默认为0
用于决定项目排列顺序，数值越小，项目排列越靠前

flex-grow

flex-grow 默认为0
用于决定项目在有剩余空间的情况下是否放大
注意：即便设置了固定宽度，也会放大

flex-shrink

flex-shrink 默认为1
用于决定项目在空间不足是是否缩小，默认1，即空间不足时大家一起等比缩小
注意：即便设置固定宽度，也会缩小

flex-basis

flex-basis 默认auto
用于设置项目宽度，默认为auto时，项目会默认宽度，或以width为自身的宽度
注意：设置flex-basis,权重会比width属性高，会覆盖width属性

flex

flex 是flex-grow,flex-shrink,flex-basis三个的简写
flex:1等同于flex:1 1 0px

双向绑定原理

双向绑定原理的代码实例
原理的讲解
双向绑定原理的代码实例
原理主要采用数据劫持和发布订阅者的模式来实现的；
通过object.defineProperty()方法来劫持各个属性的getter和setter，监听数据的变化；
在数据发生变动时发布消息给 订阅者(watcher),订阅者触发响应的回调(update)更新视图层；

什么是数据劫持？
访问数据或者修改对象的某个属性时，都会触发响的函数，在这个函数里进行额外的操作或者修改返回结果。
在触发函数的时候，在函数中所做的操作，就是数据劫持。

observer
observer用来实现对每个vue中的data中定义的属性循环用object.defineProperty()实现数据劫持，以便利用其中的setter和getter.
为每个属性都分配一个订阅者集合的管理者-dep,负责记录和通知订阅者。
当数据发生变化时发出一个notice(预告)，通知订阅者，订阅者会触发它的updated方法，对视图进行更新。