DAY8刷面试题

今天开始三天小长假啦！没有出门 好想回家 回家好贵 T-T 国庆回家更贵 也不知道会是个什么安排。

vue路由传参的两种方式，params和query方式区别

动态路由也可以叫做路由传参，就是根据不同的选择在同一个组件渲染不同的内容。
用法上：query由path引入，params用name引入，接收参数类似，分别是this.$route.query和this.$route.params.name
url上展示：params类似于post，query类似于get，也就是安全问题，params传值相对更安全一点，query通过url传参，刷新页面还在，params刷新就不存在了。

vue数据绑定方式

1、单向绑定：双大括号{{}} html内字符绑定
2、v-bind绑定：html属性绑定
3、v-model：双向绑定
4、v-once：一次性绑定，依赖于v-model

vue中常用指令有哪些

v-for：循环数组、对象、字符串、数字
v-on：绑定事件监听
v-bind：动态绑定一个或者多个属性
v-model：表单控制或者组件上的双向绑定
v-if v-else v-else-if 条件渲染
v-show：根据表达式真假，切换元素的display
v-html：更新元素的innerhtml
v-text：更新元素的textcontent
v-pre：跳过这个元素和子元素的编译过程
v-clock：这个指令保持在元素上知道关联实例结束编译
v-once：只渲染一次

vue首屏加载慢的原因？解决办法，白屏解决

原因：
第一次加载有很多组件数据需要渲染
解决方法：
路由懒加载 component:()=>import(“路由地址”)
ui框架按需加载
gzip压缩
解决白屏问题：
1、使用v-text渲染数据
2、使用{{}}语法渲染数据，但是同时使用v-clock指令（用来保持在元素上直到关联实例结束时候进行编译），不需要添加到每一个标签，只要在el挂载的标签上添加就可以。

如何让组件中的css在当前组件生效

在styled中加上scoped

vue组件中的data为什么是函数

data是一个函数的时候，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。
如果是引用类型（对象），当多个组件共用一个数据源的时候，一处数据改变，所有的组件数据都会改变，所以要利用函数通过return返回对象的拷贝（返回一个新数据），让每个实例都有自己的作用域，相互不影响。

vuex流程

在vue组件里，通过dispatch来触发actions提交修改数据的操作，然后通过actions的commit触发mutations来修改数据，mutations接收到commit的请求，就会自动通过mutate来修改state，最后由store触发每一个调用他的组件的更新

vuex如何请求异步数据

首先在state中创建变量
然后在actions中调用封装好的axios请求，异步接收数据，commit提交给mutations，mutations中改变state中的状态，将从action中获取到的数据赋值给state

vuex的state特性

state是数据源的存放池
state里面的数据是相应式的，state中数据的改变，对应这个数据的组件也会发生改变
state通过mapstate把全局的state和getters映射到当前组件的计算属性中

vuex的getters特性

getter可以对state进行计算操作，是store的计算属性
getter可以在多个组件之间复用
如果一个状态只在一个组件内使用，可以不用getter

vuex的优点缺点

优点：解决了非父子组件的通信，减少了ajax请求次数，有些可以直接从state中获取
缺点：刷新浏览器，vuex中的state会重新变成为初始状态，解决办法是vuex-along，需要配合计算属性和sessionStorage来实现

Route与router区别

1、router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

2、route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

vuex中的action是如何提交给mutations的

action函数接收一个与store实例具有相同方法和属性的context对象，可以调用context.commit提交一个mutation，或者通过contex.state和context.getters获取state和getters

Bootstrap的原理

网格系统的实现原理，通过定义容器大小，平分12（24或者32）份，再调整内外边距，结合媒体查询，就成了强大的响应式网格系统。
比如 row col-xs-4
col-xs（小于768px）
col-sm（大于等于768px）
col-md（大于等于992px）
col-lg（大于等于1200px）