Vue常问面试题2022（每天记十个肝货）

目录

1.请描述封装Vue组件的过程

2.你是怎样认识Vuex的

3.如何让css只对当前组件中起作用

4.如何实现路由嵌套？如何进行页面跳转

5.ref属性有什么用？

6.请描述Vue.js的一些特性

7.描述vue.js的特点

8.在vue.js中如何绑定事件

9.axios是什么？如何使用它？

10.什么情况下会产生片段实例？

请描述封装Vue组件的作用过程。

• 组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低、难维护、复用性等问题。

你是怎样认识Vuex的

• vuex可以理解为一种开发模式或框架。它是对 Vue. js框架数据层面的扩展。通过状态（数据源）集中管理驱动组件的变化。应用的状态集中放在 store中。改变状态的方式是提交 mutations，这是个同步的事务。异步逻辑应该封装在 action中。

如何让css只对当前组件中起作用

• 在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即<style scoped></style>。

如何实现路由嵌套？如何进行页面跳转

• 路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到 router-view定义组件渲染的位置。要进行页面跳转，就要将页面渲染到根组件内.

ref属性有什么用？

• 有时候，为了在组件内部可以直接访问组件内部的一些元素，可以定义该属性此时可以在组件内部通过this. $refs属性，更快捷地访问设置ref属性的元素。这是一个原生的DOM元素，要使用原生 DOM API操作它们.

请描述Vue.js的一些特性

•   Vue.js有以下持性。

               （1）MVVM模式。

               （2）组件化开发

                （3）指令系统

                （4）Vue2.0开始支持虚拟DOM。

  但在Vue1.0中，操作的是真实DOM元素而不是虚拟DOM，虚拟DOM可以提升页面的渲染性能。

描述vue.js的特点

• 简洁：页面由HTML模板+JSON数据+ Vue. js实例化对象组成。

• 数据驱动：自动计算属性和追踪依赖的模板表达式。

• 组件化：用可复用、解耦的组件来构造页面。

• 轻量：代码量小，不依赖其他库。

• 快速：精确而有效地批量实现DOM更新。

• 易获取：可通过npm、 bower等多种方式安装，很容易融入。

在vue.js中如何绑定事件

• 通过在v-on后跟事件名称=“事件回调函数( )”的语法绑定事件。事件回调函数的参数集合( )可有可无。如果存在参数集合( )，事件回调函数的参数需要主动传递，使用事件对象要传递 $event。当然，此时也可以传递一些其他自定义数据。如果没有参数集合，此时事件回调函数有一个默认参数，就是事件对象。事件回调函数要定义在组件的 methods属性中，作用域是 Vue. js实例化对象，因此在方法中，可以通过this使用 Vue. js中的数据以及方法，也可以通过@语法糖快速绑定事件，如@事件名称=“事件回调函数( )”。

axios是什么？如何使用它？

• axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模。

• 用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Module规范，通过 import关键字将 axios导入，并添加到 Vue. js类的原型中。这样每个组件（包括vue.js实例化对象）都将继承该方法对象。它定义了get、post等方法，可以发送get或者post请求。在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，可以直接访问组件实例化对象，存储返回的数据。

什么情况下会产生片段实例？

• 在以下情况下会产生片段实例模板包含多个顶级元素；模板只包含普通文本；模板只包含其他组件（其他组件可能是一个片段实例）；模板只包含一个元素指令，如vue- router的< router-view>；模板根节点有一个流程控制指令，如v-if或v-for。

  这些情况让实例有未知数量的顶级元素，模板将把它的DOM内容当作片段。片段实例仍然会正确地渲染内容。不过，模板没有一个根节点，它的$el指向一个锚节点，即一个空的文本节点（在开发模式下是一个注释节点）。

  注意：在Vue2.0中，组件的模板只允许有且只有一个根节点。