不好意思我不会系列之vue面试题

• vue-router路由有几种模式，说说它们的区别

  hash模式：url路径会出现#字符；hash值不包括在HTTP请求中，它是由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求；hash值的改变会触发hashchange事件

  history模式：整个地址重新加载，可以保存历史记录，方便前进后退；使用HTML5 API 和 HTTP 服务端配置，没有后台配置的话，页面刷新时会出现404

• vue常用的指令，分别的作用

  v-text：更新元素的textContent

  v-html：更新元素的innerHTML

  v-bind：绑定数据和元素属性

  v-on：绑定事件

  v-model：在表单元素上创建双向数据绑定

  v-for：基于数据源多次渲染元素或模块化

  v-if 和 v-show：条件渲染

• v-if 和 v-show 的区别

  共同点：有条件地显示元素

  v-if：对元素进行销毁和重建，动态的向DOM树内添加或者删除元素。若初始值为false，就不会编译了。每次状态更改时，代价通常会更大（更高的切换消耗

  v-show：切换元素的CSS display属性。display：none，控制隐藏，只会编译一次。就加载元素的初始渲染成本而言，v-show会渲染其display：none的元素（更高的初始渲染消耗

  应用场景：如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好

• v-for key 的作用

  主要是为了高效的更新虚拟DOM。需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点

• v-model 双向数据绑定的原理

  v-model本质上是v-bind和v-on的结合体，就是绑定它的value，通过v-on触发，从而更新数据

  双向绑定的实现主要依赖于Object.defineProperty()，通过这个函数可以监听到get，set事件。用Object.defineProperty来实现数据的劫持，然后用他的get，set方法来通知订阅者，触发update方法，从而实现更新视图

• vue的优缺点

  优点：轻量级框架，简单易学，双向数据绑定，组件化，数据和结构分离，虚拟dom，运行速度快

  缺点：vue不支持ie8，生态环境差不如angular和react，社区不大

• Vue CLI生成的各文件夹代表的意思

  

（图片侵权必删）

• vue项目打包后文件过大的优化方法

  1. 路由懒加载：如果使用Babel，需要添加syntax-dynamic-import插件，才能使Babel正确地解析语法。
  2. cdn加载
  3. 组件按需加载

• vue组件之间传值（父传子，子传父，兄弟组件之间）

  父传子：使用props

  ​ 父：自定义属性名 + 数据（要传递） => :value=“数据”

  ​ 子：props[“父组件上的自定义属性名”] => 进行数据接收

  子传父：需要事件触发 $emit

  ​ 子：@click = “方法”

  ​ 方法( ){this.$emit(‘自定义事件名称’，数据)}

  ​ 父：子组件标签上绑定@自定义事件名称 = ’回调函数‘

  ​ methods: {回调函数(){//逻辑处理}}

  兄弟组件：

  ​ 通过中央通信，bus.js

  ​ import vue from “vue”

  ​ export default new Vue()

  ​ A: methods:{ 函数{bus.$emit(‘自定义事件名’,数据)} }

  ​ B: created(){bus.$on('A发送过来的自定义事件名’, 函数)} 进行数据接收

• 菜单的折叠

  element ui组件中NavMenu导航菜单中unique-opened属性控制，默认为false，可多个子菜单同时打开；true，只保持一个子菜单的展开

  如何用html+css+js实现此效果？

  原理：获取父级菜单和子级菜单的节点，通过for循环给父级菜单绑定点击事件。

  点击事件，包括两步，循环子级菜单，设置其display：none；然后让点击了的父级菜单的子级菜单的display为block。

• vue的生命周期（created和mounted的区别）

  beforeCreate: 在new一个vue实例后，只有一 些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候， data和methods中的数据都还没有 初始化。不能在这个阶段使用data中的数据和methods中的方法

  created: data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段中操作

  beforeMount:执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

  mounted:执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最可以在和这个阶段中进行

  beforeUpdate:当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
  updated :页面显示的数据和data中的数据已经保持同步了，都是最新的

  beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的data和methods，指令，过滤器…都是处于可用状态。还没有真正被销毁

  destroyed:这个时候上所有的data和methods，指令，过滤器…都是处于不可用状态，组件已经被销毁了。

  created和mounted的区别：

  created：在模版渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图

  mounted：在模版渲染成html后调用，通常是初始化页面后，再对html的dom节点进行一些需要的操作。

• keep-alive是怎么使用的

  概念：keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

  作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性