Vue 60 道面试题及答案.docx

"Vue面试题及答案详解" 以下是从给定文件中生成的相关知识点： 一、 Vue 的优点 * 轻量级框架：只关注视图层，大小只有几十kb * 简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习 * 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单 * 组件化：保留了 React 的优点，实现了 HTML 的封装和重用，在构建单页面应用方面有着独特的优势 * 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作 * 虚拟 DOM：DOM 操作是非常耗费性能的，不再使用原生的 DOM 操作节点，极大解放 DOM 操作 * 运行速度更快：相比较与 React 而言，同样是操作虚拟 DOM，性能上具有很大的优势 二、 Vue 中父组件向子组件传递数据 * 通过 props 子组件像父组件传递事件？$emit 方法 三、 v-show 和 v-if 指令的共同点和不同点 * 共同点：都能控制元素的显示和隐藏 * 不同点：实现本质方法不同，v-show 本质就是通过控制 CSS 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false，就不会编译了 四、让 CSS 只在当前组件中起作用 * 在组件中的 style 前面加上 scoped 五、 Vue 中的指令和它的用法 * v-model 双向数据绑定 * v-for 循环 * v-if v-show 显示与隐藏 * v-on 事件 * v-once 只绑定一次 六、 Vue-Loader 是什么？ * Vue 文件的一个加载器，将 template/js/style 转换成 js 模块 七、为什么使用 key？ * 需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点 八、Axios 及安装？ * 请求后台资源的模块 * npm install axios --save，js 中使用 import 进来，然后 .get 或 .post 九、V-modal 的使用 * 2、v-bind 绑定一个 value 属性 * 3、v-on 指令给当前元素绑定 input 事件 十、Vue.cli 项目中 src 目录每个文件夹和文件的用法？ * assets 文件夹是放静态资源 * components 是放组件 * router 是定义路由相关的配置 * app.vue 是一个应用主组件 * main.js 是入口文件 十一、Computed 和 Watch 的使用场景 * Computed：当一个属性受多个属性影响的时候就需要用到 computed * Watch：当一条数据影响多条数据的时候就需要用 watch 十二、$nextTick 的使用 * 1、v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：当你修改了 data 的值然后马上获取这个 DOM 元素的值，是不能获取到更新后的值，你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 DOM 元素之后在获取，才能成功 十三、Vue 组件中 data 为什么必须是一个函数？ * 因为 JavaScript 的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象 十四、渐进式框架的理解 * 主张最少，可以根据不同的需求选择不同的层级 十五、Vue 中双向数据绑定的实现 * 通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变 * 核心：关于 Vue 双向数据绑定，其核心是 Object.defineProperty() 方法