Vue面试基础题

一. Vue核心小知识点

1、vue中 key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM

2、vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

第二种就是通过this.$emit("父组件的方法名"，"要传给父组件的一些内容")

3、vue等单页面应用及其优缺点

单页应用的优缺点

优点：

无刷新体验,提升了用户体验；

完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

API 共享，如果你的服务是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供鲁棒的服务；

组件共享，在某些对性能体验要求不高的场景，或者产品处于快速试错阶段，借助于一些技术（Hybrid、React Native），可以在多端共享组件，便于产品的快速迭代，节约资源。

缺点：

首次加载大量资源，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长；

较高的前端开发门槛，MVC 前置，对前端工程师的要求提高了，不再是『切切图，画画页面这么简单』；同时工作量也会增加数倍，开发这类应用前端工程师的数量往往多于后端；

不利于 SEO，单页页面，数据在前端渲染，就意味着没有 SEO，或者需要使用变通的方案。

二. v-show和v-if指令的共同点和不同点?

相同点：都是隐藏和显示元素的

不同：v-show只是display的显示和隐藏其实dom节点还在HTML上。而v-if直接删除了dom元素
 

三. 如何让CSS只在当前组件中起作用?
将当前组件的<style>修改为<style scoped>

四. <keep-alive></keep-alive>的作用是什么?
 

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，
这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

五. Vue中引入组件的步骤?

1.采用ES6的import ... from ...语法

或
CommonJS的require()方法引入组件

2.对组件进行注册,代码如下

注册

Vue.component('my-component',
{  template: '<div>A custom component!</div>'})
 

3.使用组件<my-component></my-component>

七. 在Vue中使用插件的步骤
 

1. 采用ES6的import ... from ...语法
    

2. 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象
   
   Vue.use(MyPlugin, { someOption: true })

什么是MVVM？
答：MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

$route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等