VUE面试题

vue优点？

答：

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
• 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
• 运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

vue的两个核心点

答：

• 数据驱动：ViewModel，保证数据和视图的一致性。
• 组件系统：应用类UI可以看作全部是由组件树构成的。

vue父组件向子组件如何传递数据？

答：通过props

vue子组件向父组件传递事件？

答：emit方 法

v-show 与 v-if 区别

答：

• 共同点：都能控制元素的显示和隐藏
• 不同点： v-show是通过控制css中的display设置为none， v-if是完整的创建和销毁虚拟Dom。
• 使用时要注意： 频繁切换时用v-show，运行时较少改变时用v-if

如何让CSS只在当前组件中起作用？

答：

• 在组件中的style前面加上scoped

如何获取dom?

• 答：ref="domName"用法：this.refs.domName

mvvm 框架是什么？

答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

vue-router 是什么?它有哪些组件

答：vue用来写路由一个插件。router-link、router-view

1. 全局钩子 作用：跳转前进行判断拦截。
2. 单个路由独享的
3. 组件级的

• 全局导航钩子
  router.beforeEach(to, from, next),
  router.beforeResolve(to, from, next),
  router.afterEach(to, from ,next)

• 组件内钩子
  beforeRouteEnter,
  beforeRouteUpdate,
  beforeRouteLeave

• 单独路由独享组件
  beforeEnter

绑定 class 的数组用法

• 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 数组方法v-bind:class="[class1, class2]"
• 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"

说出几种vue当中的指令和它的用法？

答：

• v-model：双向数据绑定；
• v-for：循环；
• v-if和v-show 显示与隐藏；
• v-on事件；
• v-once:只绑定一次

vue-loader是什么？使用它的用途有哪些？

答：

vue文件的一个加载器，将template/js/style转换成js模块。

用途：

js可以写es6、style样式可以scss或less、template可以加jade等

vue中为什么使用key?

答：

需要使用key来给每个节点做一个唯一标识，通过DOM Diff算法就可以正确的识别此节点。

作用:

主要是为了高效的更新虚拟DOM。

v-model的原理？

v-model常用于数据表单的双向绑定，其实它就是一个语法糖，其原理就是通过v-bind绑定一个value值，v-on指令给当前元素绑定事件。

计算属性computed和 watch 的区别

先分别介绍computed和watch 计算属性computed是自动监听依赖值的变化，从而动态返回内容; 监听watch是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。 区别: 主要来源于用法， 如果只是需要动态值，那就用计算属性，最典型的栗子： 购物车商品结算的时候 如果需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法， 最典型的栗子： 搜索数据

说出一下区别会加分

• computed 是一个对象时，它有哪些选项？

  有get和set两个选项

• computed 和 methods 有什么区别？

  methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。

• computed 是否能依赖其它组件的数据？

  computed可以依赖其他computed，甚至是其他组件的data

• watch 是一个对象时，它有哪些选项？ handler deep 是否深度 immeditate 是否立即执行

事件修饰符

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture：与事件冒泡的方向相反，事件捕获由外到内；
• .self：只会触发自己范围内的事件，不包含子元素；
• .once：只会触发一次。

组件中 data 为什么是函数

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。 组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

keep-alive

• 在组件的切换过程中将状态保留在内存中,防止重复渲染,从而提高性能。

v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。 如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

简述一下vue生命周期

• 1. 创建阶段 beforeCreate/created 在beforeCreate 阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。 在created阶段，可以操作后端数据数据驱动视图 vue实例的数据对象有了，el还没有。
• 2. 载入阶段 beforeMount/mounted 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。总之一句话：挂载数据到DOM之前调用。 在mounted阶段，vue实例挂载完成，data成功渲染。总之一句话：挂载数据到DOM之后调用。可以进行操作DOM。
• 3. 更新阶段 beforeUpdate/updated 当data变化时，会触发beforeUpdate和updated方法。这两个不常用，不推荐使用。 beforeUpdate在更新DOM之前该钩子函数，应用：可以获取原始DOM. updated在更新DOM之后调用该钩子函数，应用：可以后最新的DOM
• 4. 销毁阶段 beforeDestory/destoryed beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后，触发的destroyed。

1.vuex是什么？怎么使用？哪种功能场景使用它？

答：vue框架中状态管理。在main.js引入store，注入。 新建了一个目录store.js，…… export 。 场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module state => 基本数据(数据源存放地) getters => 从基本数据派生出来的数据 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex

Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。 如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

assets和static的区别

相同点：

assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

不相同点：

assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

SPA首屏加载慢如何解决

答：安装动态懒加载所需插件；使用CDN资源。

2Vue-router跳转和location.href有什么区别

答：

使用location.href=’/url’来跳转，简单方便，但是刷新了页面；

使用history.pushState(’/url’)，无刷新页面，静态跳转；

引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了

history.pushState()，尤其是在history模式下。

nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后，立即使用这个回调函数，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
  // DOM 更新
})

Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

答：

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

vue获取数据在哪个周期函数

答：

一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

Vue2中注册在router-link上事件无效解决方法

答：

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

答:

• 方法一：只用a标签，不适用button标签；
• 方法二：使用button标签和Router.navigate方法

created和mounted的区别

答： created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

组件间的通信

1. 父子 props/event $parent/$children ref provide/inject
2. 兄弟 bus vuex
3. 跨级 bus vuex provide.inject

vue初始化页面闪动问题

答： 首先： 在css里加上

[v-cloak] {
display: none;
}。

如果没有彻底解决问题，则在根元素加上style=“display: none;” :style="{display: ‘block’}"

vue更新数组时触发视图更新的方法

答: push()；pop()；shift()；unshift()；splice()； sort()；reverse()

第一次页面加载会触发哪几个钩子？

答：beforeCreate， created， beforeMount， mounted

怎样理解单向数据流

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。 一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案： 在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

export default {
  props: {
    value: String
  },
  data () {
    return {
      currentValue: this.value
    }
  }
}

如果是对 prop 值的转换，可以使用计算属性：

export default {
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase();
    }
  }
}

vue修改打包后静态资源路径的修改

答：

cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 ‘./’ 。 build: { … assetsPublicPath: ‘./’, … }

cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改） module.exports = { publicPath: ‘’, // 相对于 HTML 页面（目录相同） }

Vue.js 2.x 双向绑定原理

这个问题几乎是面试必问的，回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。

vue slot插槽

答：

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

默认插槽

作用域插槽

具名插槽

路由的跳转方式

一般有两种：

1. router-link标签会渲染为标签，咋填template中的跳转都是这种；
2. 另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')

object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：Object.defineProperty(obj, prop, descriptor)

var obj = {};
Object.defineProperty(obj,'hello',{
  get:function(){
    //我们在这里拦截到了数据
    console.log("get方法被调用");
  },
  set:function(newValue){
    //改变数据的值，拦截下来额
    console.log("set方法被调用");
  }
});
obj.hello//输出为“get方法被调用”，输出了值。
obj.hello = 'new Hello';//输出为set方法被调用，修改了新值

var obj = {};
Object.defineProperty(obj,'hello',{
  get:function(){
    //我们在这里拦截到了数据
    console.log("get方法被调用");
  },
  set:function(newValue){
    //改变数据的值，拦截下来额
    console.log("set方法被调用");
    document.getElementById('test').value = newValue;
    document.getElementById('test1').innerHTML = newValue;
  }
});
//obj.hello;
//obj.hello = '123';
document.getElementById('test').addEventListener('input',function(e){
  obj.hello = e.target.value;//触发它的set方法
})