vue面试题.docx

Vue.js 面试题解析 本篇文章将详细解析 Vue.js 面试题，涵盖 Vue.js 的优点、父子组件间的数据传递、指令的使用、CSS 的作用域、keep-alive 组件、DOM 操作、指令的使用、vue-loader 的作用、key 的使用、axios 的安装和使用、v-model 的使用、 vue-cli 项目结构、computed 和 watch 的使用场景、v-on 的多方法监听、$nextTick 的使用、data 必须是函数的原因等知识点。 一、Vue.js 的优点 ----------------- * 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb * 简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习 * 双向数据绑定：保留了 Angular 的特点，在数据操作方面更为简单 * 组件化：保留了 React 的优点，实现了 HTML 的封装和重用，在构建单页面应用方面有着独特的优势 * 视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作 * 虚拟 DOM：DOM 操作是非常耗费性能的，不再使用原生的 DOM 操作节点，极大解放 DOM 操作，但具体操作的还是 DOM，不过是换了另一种方式 * 运行速度更快：相比较与 React 而言，同样是操作虚拟 DOM，就性能而言，Vue 存在很大的优势 二、父子组件间的数据传递 ------------------------- * 父组件向子组件传递数据：通过 props * 子组件像父组件传递事件：$emit 方法 三、指令的使用 -------------- * v-model：双向数据绑定 * v-for：循环 * v-if v-show：显示与隐藏 * v-on：事件 * v-once：只绑定一次 四、CSS 的作用域 -------------- * 在组件中的 style 前面加上 scoped 五、keep-alive 组件 ------------------- * 作用：使被包含的组件保留状态，或避免重新渲染 六、DOM 操作 ------------ * 如何获取 DOM：ref="domName" 用法：this.$refs.domName 七、axios 的安装和使用 ------------------------- * 是一个请求后台资源的模块 * 安裝：npm install axios --save * 使用：import axios from 'axios'; axios.get() 或 axios.post() 八、v-model 的使用 --------------------- * 用于表单数据的双向绑定 * 其实它就是一个语法糖，这个背后就做了两个操作：v-bind 绑定一个 value 属性；v-on 指令给当前元素绑定 input 事件 九、vue-cli 项目结构 ---------------------- * assets 文件夹：放静态资源 * components 文件夹：放组件 * router 文件夹：定义路由相关的配置 * app.vue 文件：一个应用主组件 * main.js 文件：入口文件 十、computed 和 watch 的使用场景 --------------------------------- * computed：当一个属性受多个属性影响的时候就需要用到 computed * watch：当一条数据影响多条数据的时候就需要用 watch 十一、v-on 的多方法监听 ------------------------- * 可以监听多个方法：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }"> 十二、$nextTick 的使用 --------------------- * 当你修改了 data 的值然后马上获取这个 DOM 元素的值，是不能获取到更新后的值，你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 DOM 元素之后在获取，才能成功 十三、data 必须是一个函数 --------------------------- * 因为 JavaScript 的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象 * 组件中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有自己私有的数据空间