前端面试题1

1.vue响应式原理

第一步组件初始化的时候，先给每一个Data属性都注册getter，setter，也就是reactive化。然后再new 一个自己的Watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM。在调用render的时候，就会需要用到data的属性值，此时会触发getter函数，将当前的Watcher函数注册进sub里。

第二步：当data属性发生改变之后，就会遍历sub里所有的watcher对象，通知它们去重新渲染组件。

参考:https://zhuanlan.zhihu.com/p/88648401

2.vue的生命周期

beforeCreate :  new Vue()之后触发的第一个钩子，此时方法和函数都不能用.(可加loading事件)

created:实例创建完成,可使用修改数据,无法dom交互,可在此时做初始数据获取.可用vm.$nextTick来访问Dom

(可在此处结束loading事件或异步请求数据获取)

beforeMount：虚拟dom创建完成,即将开始渲染,可更改数据,不会触发updated

mounted:真实dom挂载完毕,数据完成双向绑定,可使用$ref操作dom.

beforeUpdate:数据更新,虚拟dom重新渲染之前,可在此处更改数据.

updated:更新完成,此处更新数据造成无限循环.(写数据统一处理函数)

beforeDestory:实例销毁前,可在此处善后如清计时器,销毁父对子组件监听等.

destoryed:销毁后 数据绑定也移除

nextTick:更新数据后立即操作dom.

3.HTML5或css3的新特性

html5: header,footer,main,section,aside,nav。 video ,radio，canvas,svg.

input的type添加(email，url，number，range，Date pickers，search，color)

地理位置Geolocation API,定位:localStorage和sessionStorage

css3:媒体查询  transform，transition   box-shadow,text-shadow  animation  border-radius，border-image