一、Vue
1.Vue是如何实现双向数据绑定的？原理是什么？
（1）Vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter,在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通JavaScript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用object.defineProperty（）将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。
（2）Vue的数据双向绑定将MVVM作为数据绑定的入口，整合observe，compile和watcher三者，通过observe来监听自己的model的数据变化，通过compile来解析编译模板指令（Vue中是用来解析{{}}），最终利用watcher搭起observer和compile之间的通信桥梁，达到数据变化——>视图更新；视图交互变化（input）——>数据model变更双向绑定效果。
2.Vue常见指令
v-model：多用于表单元素实现双向数据绑定
v-bind：简写为：，动态绑定一些元素的属性类型可以是；字符串、对象或数组
v-on：click给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for格式：v-for=“字段名 in（of） 数组 json”
循环数组或json
v-show显示内容
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false,v-else才会被染出来
v-if指令：取值为true/false,控制元素是否需要被渲染
v-else-if必须和v-if连用v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false,v-else才会被渲染出来
v-text解析文本
v-html解析HTML标签
v-bind：class三种绑定方法：1、对象型{red：isred}2、三元型isred？“red”：“blue”3数组型[{red:'“isred”},{blue:“isblue”}]
v-once:进入页面时只染一次 不在进行渲染
v-cloak防止闪烁
v-pre把标签内部的元素原位输出
3、v-for循环为什么一定要绑定key?
给每个dom元素加上key作为唯一标识，diff算法可以正确的识别这个节点，使页面渲染更加迅速！
4、v-if和v-show有什么区别？
相同点：都可以控制dom元素的显示和隐藏
不同点：v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面v-if直接将dom元素从页面删除，再次切换需要重新渲染页面。
5、Vue组件之间传参方法有哪些？
父子组件之间最常用的组件传参方式就是：父传子使用v-bind；attr传递，子组件使用props接收，子传父使用方法传递，父组件在方法参数中获取，即$emit[‘methods’:val],父组件使用@method接收。
兄弟组件之间传参可以使用vuex、localstorage、sessionStorage、EventBus事件中转，前面三种方法无非是找第三方把数据存起来，需要的时候再获取就行，这里主要讲一下事件中转的用法。
6、介绍一下Vue的生命周期钩子函数
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。在vue组件中，组件的实例从创建前(beforeCreate)、创建后(created)、挂载前(beforeMount)、挂载后(mounted)、更新前(beforeUptate)、更新后(updated)、销毁前(beforeDestroy)、销毁后(destroyed)一系列，即从创建到销毁的整个过程，我们把它称之为vue组件的一个完整的生命周期。
beforeCreate(){}：实例初始化之前 数据没有加载 页面没有显示
debugger; 断点调试
往往在这个阶段做loading 请求状态
Created(){}：实例初始化后，请求到了数据，事件，属性等，但是没有加载，页面依然没有显示，在这个阶段，往往发送 ajax请求，http请求
1.create---beforeMount之间 vue会在options中查找有没有el选项，有就把它作为模板，没有就通过vm.$mount() 去挂载
2.created之后有个判断，先看你有没有el属性，在看看有没有模板属性，有模板属性呢，就会把模板上的东西渲染出去，没有模板属性呢，就把el上的东西当做模板渲染出去，
3.created-boforeMount的过程就是找模板，而模板都是虚拟的
beforeMount(){}：vue会将el对应的模板 加到$el中去,但是还没有挂载出去，页面没有显示
mounted(){}：页面加载出来
beforeUpdate(){}：数据更新前，在虚拟dom中使用differ算法，在内存中实现的，mounted之前的过程就不管了。如果想看属性的变化，
在这个阶段可以使用watch(属性监听)这个方法监听属性
update(){}：更新完了，在渲染，谁改变了渲染谁，不是整个dom树重新渲染
beforeDestroy(){}：销毁之后
销毁：之前渲染好的保持不变，保留下来，后面再使用这个实例就不起作用了
Vm.$destroy() 进行销毁
destroyed(){}：销毁之后
简述一下每个周期具体适合那些场景：
beforeCreated：可以在这加个loading事件，在加载实例是触发
created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mouted：挂载元素，获取到DOM节点
updated：如果对数据统一处理，在这里写上相应函数
beforeDestroy：可以做一个确认停止事件的确认框
nextTick：更新数据后立即操作Dom
7、vue-router有哪些钩子函数？
（1）全局路由钩子函数beforeEach和afterEach
每次路由跳转，都会执行beforeEach和afterEach，一般写在main.js可以做权限控制
beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不用传next()函数
这类钩子主要作用于全局,一般用来判断权限等操作
（2）单个路由钩子函数beforeEnter和beforeleave
beforeEnter有三个参数：to/from/next
单个路由钩子函数主要用于写某个指定路由跳转时需要执行的逻辑
（3）组件路由钩子函数beforeRouteEnter，beforeRouteUpdate,beforeRouteLeave
三个参数：to/from/next
beforeRouteEnter：进入这个组建路由之前
beforeRouteLeave：离开这个组建路由
beforeRouteUpdate：再本路由的下级路由切换才会触发beforeRouteUpdate
总共有7个钩子函数！
8、vue-router有哪些属性？
属性：
$route.fullPath ：完成解析后的url，包含查询参数和hash的完整路径
$route.path：路径，字符串类型，解析为绝对路径
$route.hash： 当前路由的hash值（带#号的），如果没有hash值则为空字符串
$route.name：当前路由的名称，如果有的话（用于命名路由）
$route.params：一个键值对对象，路由参数
$route.query：一个键值对对象，表示url查询参数
$route.matched：一个包含了当前路由的所有嵌套路径片段的路由记录（routes配置数组中的对象副本）
$route.redirectedFrom：重定向来源的路由的名字，如果存在重定向的话。
8、怎么理解单向数据流
vuex是单向数据流,表单是双向数据绑定,所以有表单的地方就不要使用vuex
9、vue和react区别
组件 props
Vue 组件，表现上更接近原生 DOM 节点，你在上面加原生的 class、id、style 等 props，是会被添加到 Vue 组件的根节点上的，添加 style 和 class 会比较方便。
而 React 组件的所有 Props 你都需要自己处理，像是 style 和 className 这些 props 是要自己手动处理的。
function Component (props) {
return (
<div style={props.style} className={classNames('app', props.className)}>
// ...
</div>
)
}
渲染
Vue 的渲染是基于模板（Temple），写起来更像是 HTML，对新手比较友好。
React 则是用 JS 通过嵌套的 React.createElement 来描述 DOM。因为用 React.createElement 比较繁琐，React 推出了 JSX，对 JS 扩展了一些语法，能够使用接近 HTML 的写法来表示 React.createElement。
JSX 要比 Temple 要灵活一些，更方便在里面加各种逻辑，调用各种函数生成一些 ReactElement，插入到 JSX 中。
Temple 没这么灵活，本质是字符串。你需要用到一些指令去完成一些逻辑，比如 v-if、v-for，但更方便做性能的优化。Vue 进行生产环境打包时，会对 Temple 预编译，实际运行时不会真的对着 Temple 进行运行时编译。
新手友好程度
Vue 比 React 对新手更友好。
首先是文档。文档是开源框架能否流行，一个重要的指标。
性能
Vue 的性能优于 React。
Vue 的响应式可以做到只更新必要的组件，性能更优。
Vue 的底层是响应式，它会劫持状态的读写，进行细粒度的依赖收集。当状态变化时，只有用到它的组件才会更新。
React 则是纯正的单向数据流，数据从父组件流向子组件。当父组件更新时，子组件也会更新，即使这个子组件的状态没有变化。为了跳过这种无必要的渲染，我们需要额外使用 React.memo 做缓存，需要付出不小成本，一不小心还会整成负优化。
React 其实也可以变成响应式，加一个状态管理库，通过发布订阅模式触发组件更新即可，但它不能拯救性能。
Vue 做了编译优化。
对于渲染模板方案，Vue 使用了Temple，React 使用了 JSX。
Vue 的 Template 可以做预编译优化。比如一些 DOM 元素是写死的，解析 Template 时，就可以做标记，在第 n 个位置的元素是静态的，就不需要在更新的时候重新构建对应节点，进行 diff 了。
10、angular和vue的区别
1、体积和性能
vue占用空间更小，比如一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB) ，比angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。
在渲染性能上，这两个框架都很快，性能上几乎没有差别。
2、开发效率
都提供了各自的脚手架工具，帮助提高从开发到构建打包的整套过程，另外均可以基于组件化开发，编写可复用的组件，大大较少重复性的工作。但angular凭借 Typescript 本身比 JavaScript 更加工程化的优势，在都是团队开发的情况下，angular会更具优势。
3、灵活性
Vue 相比于 Angular 更加灵活，可以按照不同的需要去组织项目的应用代码。比如，甚至可以直接像引用jquery那样在HTML中引用vue，然后仅仅当成一个前端的模板引擎来用。
4、可维护性
我理解的可维护性包括两个层次，一是代码的可读性，二是可重构性。同样是因为对TS(能提供静态类型检查)的支持不够全面，使得vue在这两个层次都有些不足。vue作者本人也承认vue在TS 的支持上还有所不足，在3.0版本中将会有所改进。
5、学习成本高
vue简单易学，而angular的上手难度较高。
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
6、指令
angular的指令都是ng-xxx，而vueJS的指令都是v-xxx。
二、css
1、请写出css优先级
优先级关系：！important（在样式属性后不加“;”，在！important后加分号） > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符 > 继承 > 浏览器默认属性
CSS选择器分类
全局选择器（通配符*）
标签选择器（body，div，p，ul，li）
类选择器（.）
ID选择器（#）
组合选择器（.head .head_loge，两选择器之间用空格隔开）
后代选择器（#head .nav li ul，从父级到子孙集的选择器）
子选择器（div>p）
群组选择器（div，span，img{color：red；}，即将具有相同样式的标签分组显示）
继承选择器（div p，两选择器用空格键分开）
伪类选择器（链接样式a元素的伪类：:link(未被访问)，:visited(已访问)，:active(被选择)，:hover(当鼠标悬停在链接上)）
字符串匹配的属性选择符（^(开始)，$(中间)，*(结尾)）
css相邻兄弟选择器（如h1+p）
CSS选择器权值：是由四个级别和各级别出现次数决定的
四个级别：行内样式，id选择器，class选择器，标签
2、display常用属性
| 值 | 描述 |
|---|---|
| block | 设置元素为块级元素 |
| inline | 设置元素为行内元素 |
| inline-block | 行内块元素 |
| none | 在不删除元素的情况下隐藏或显示元素（不占空间） |
| flex | 弹性布局属性 |
| inline-flex | 弹性布局属性 |
3、display : none和visiable : hidden区别
联系：它们都能让元素不可见
区别：
display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
读屏器不会读取display: none元素内容；会读取visibility: hidden元素内容
4、 什么是浮动，有什么作用，有何副作用，以及如何清除浮动？
答：浮动是使用给节点添加 float 属性，最初的设计是用来实现文字环绕的。 添加了 float 的节点脱离文档流，同时触发节点的 BFC，让节点往一个方向靠，并排成一行。 当一个父节点的子节点全部浮动，就会造成父节点高度塌陷， 解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点（通常使用伪元素 before，after），再者还可以触发父节点的 bfc，常用的定位，或者 overflow：hidden。
5、水平居中实现
元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto
如果元素为绝对定位（或相对定位），可以设置父元素position为relative，宽度固定时设置left:0;right:0;margin:auto
如果元素为绝对定位（或相对定位），可以设置父元素position为relative，宽度固定时设置left:50%，margin-left值为宽度一半的负值
使用flex布局，设置父元素display:flex;同时设置justify-content: center;
使用老版flex布局，设置父元素display: -webkit-box;同时设置-webkit-box-pack: center;
6、margin为负值
- margin-top 负值，元素向上移动
- margin-bottom 负值，下方元素向上移动
- margin-left 负值，元素向左移动
- margin-right 负值，右侧元素向左移动
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
