vue 常见面试题

一个url从输入到页面呈现发生了什么？
浏览器会dns解析域名，获取对应的ip地址，和服务器建立tcp连接三次握手，想服务器发送http请求，，服务器通过接收到这个地址和参数，将html页面内容发送给浏览器，浏览器接收到内容，会自上而下渲染页面，如果有外部引入的资源，会重复上述的步骤

安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
将cnpm所在目录配置为环境变量
cnpm -v

全局安装vue-cli
cnpm install --global vue-cli

创建项目
vue init webpack 项目名
除了eslint 都可以yes
cnpm install 
npm run dev

vue 导航守卫
1.全局前置守卫  router.beforEach(to,from,next)
2.全局解析守卫 router.beforeResolve ,在导航被确认之前，同时在所有组件守卫和异步路由组件被解析之后
3.全局后置钩子  router.afterEach(to,from)
4.路由独享的守卫  在路由配置（router.js写路由的时候），beforeEnter：（to，from,next）=>

vue  路由传参
路由配置的时候  [{path:'/user/:id',component:User}]
事件传参 this.$router.push({name:'user',query:query})
 this.$router.push({name:'usr',params:{id:1}})  
params路径里不显示 

vue 双向绑定的原理
在vue初始化过程中，vue编译器会遍历html模板的dom元素，生成虚拟的dom树，在通过遍历dom树上的元素时，如果是个元素而且有v-model属性，就给它添加input事件监听当前元素的值的变化并修改data里对应的值
在vue初始化过程中，同样会遍历data里的所有属性，通过defineProperty监听每个属性的get和set方法，当这个值发生变化时，就能监听到变化并控制view层修改对应的元素
vue采取数据劫持结合发布/订阅模式的方式，通过Object.defineproperty劫持每个属性的getter和setter方法，当数据发生变动，发布消息给订阅者触发相应的监听回调

vue 生命周期
beforecreate:实例化数据加载之前，created：数据加载结束之后，beforemounte:开始生成虚拟dom树，mounted:页面结构加载结束之后，beforeupdate:数据更新的时候，updated:数据更新去，且dom元素更新后，beforedestory:页面销毁前，还能访问到数据，destorty:实例化销毁

keep-alive 

可以对组件或者页面（router-view）缓存渲染状态

vue data为什么是函数，因为只有函数才有作用域这个概念，如果用对象，每个实例化的data可能会有冲突，一个页面的属性改变，也会影响其他页面，而函数的话因为作用域问题，只会影响当前页面里的data里的属性

打包时开启gzip  
config index.js productiongzip：true；安装依赖，配置压缩的文件格式 

let 没有变量提升，未声明变量直接使用会报错 不能重复声明 
 const 声明常量 不可修改  如简单的字符串 数字 布尔 等 如果是对象或者数组 不能直接修改值，但可以对其属性或者元素进行修改
new set()数组
new map() 对象

for in 遍历数组问题：遍历的是数组的索引
1.var i  in arr 的i索引是字符串数字，不能直接进行运算
2.遍历顺序可能不是按照实际数组内部顺序
3.它会遍历数组的所有可枚举属性包括原型
所以更适合遍历对象  这时的i对应的就是对象的key值

 for of ：遍历数组 是遍历的数组的元素，不包括原型属性
不能遍历对象，可以相应break,continue,return语句

模板字符串 ``
扩展运算符 [...arr] {...obj}

箭头函数

computed和watch区别
computed 的属性不能和data里重复，否则会报错，watch的属性可以
computed 每个属性有get和set方法，watch 里则有hanlder方法（新值和旧值）和deep、immediate属性
immediate true,代表watch里声明了某个属性后，会立即执行对应的handler方法，false,则不会再绑定的时候就执行
deep就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上监听，性能开销大，这个对象的任何属性修改都会触发handler方法，所以可以用字符串里引用对象的属性来监听某个属性变化
computed 是计算属性，具有缓存性，页面重新渲染值不变化，会立即返回之前的计算结果，不用再次执行，watch无缓存性，页面重新渲染值不变化也会执行

vue常用的修饰符
v-model.lazy
v-model.number
v-model.trim
@click.stop 停止向上触发 
@click.prevent  阻止默认事件
@click.capture
@click.self
@click.once
@keyup.enter,tab,esc,up,down,shift,alt,ctrl

清除浮动 
给父元素一个class clearfix
clearfix::after{
content:'';
clear:both;
display:block;
visibility:hidden;
}
clearfix{
zoom:1;
overflow:hidden/auto;
}

border-box 元素的width和height决定宽高，border padding不算在元素的宽高里
content-box 元素内容和padding和border一起决定width和height

flex布局
display:flex;
justify-content:start;end;flex-satrt;flex-end;space-round;space-evenly;space-between;
flex-direction:column//列，row 行
flex-wrap:norwarp//不换行 wrap 换行 wrap-reverse 换行翻转 会从底部开始排列
flex-flow deriction和wrap的简写 默认 row nowrap
align-items flex-start（贴着顶部）/flex-end（贴着底部）/center （居中）/baseline/stretch(默认)

get post区别
浏览器回退时post会再次请求，get不会，
get会在浏览器历史记录保存，客户可见，post不会，用户不可见 
get传输信息有字节大小限制，编码限制，post没有，
get请求更加高效，post相对安全

回流和重绘 
回流是指页面布局、尺寸发生变化 一般是元素大小变化、增删节点等
重绘是外观变化 背景、颜色等属性
回流必定重绘 重绘不一定回流