vue面试题几十道题.pdf

【Vue.js 知识点详解】 1. **Vue 优点** - **轻量级**：Vue.js 只关注视图层，体积小巧，优化后通常只有几十 KB。 - **简单易学**：由国人开发，有丰富的中文文档，学习成本较低。 - **双向数据绑定**：简化数据操作，类似于 Angular 的特性。 - **组件化**：类似 React，支持组件封装和复用，方便构建单页面应用。 - **视图、数据、结构分离**：提高代码可读性和可维护性。 - **虚拟 DOM**：减少 DOM 操作带来的性能损耗，提高应用性能。 - **运行速度快**：相比 React，在处理虚拟 DOM 方面更高效。 2. **父组件向子组件传递数据** - **props**：Vue 中，父组件可以通过 props 向子组件传递数据，子组件接收这些数据作为属性。 3. **子组件向父组件传递事件** - **$emit**：子组件使用 `$emit` 方法触发自定义事件，父组件通过监听这些事件来获取数据或执行相应操作。 4. **v-show 和 v-if 指令** - **共同点**：都能控制元素的显示和隐藏。 - **不同点**：v-show 通过改变 CSS 的 `display` 属性实现，始终会编译；v-if 会动态地添加或删除 DOM 元素，只有当条件为真时才会编译。v-if 更适合于不频繁切换的场景，而 v-show 适合频繁切换，初始化时开销较大。 5. **CSS 局部作用域** - **scoped**：在组件的 `<style>` 标签上添加 scoped 属性，使得样式仅对当前组件生效。 6. **<keep-alive>组件** - **作用**：保持组件的状态，避免重复渲染，用于缓存组件实例。 7. **获取 DOM 元素** - **ref**：在模板中使用 `ref` 注册引用，然后在 Vue 实例中通过 `$refs` 访问对应的 DOM 元素。 8. **Vue 指令及其用法** - **v-model**：双向数据绑定，常用于表单控件。 - **v-for**：循环遍历数据。 - **v-if/v-show**：控制元素的显示与隐藏。 - **v-on**：事件监听。 - **v-once**：只渲染元素和组件一次，后续数据变动不再更新。 9. **vue-loader** - **定义**：Vue 文件的加载器，用于将 Vue 单文件组件（SFC）中的 template、script、style 转换为 JavaScript 模块。 - **用途**：支持 ES6、SCSS/LESS 以及 jade 等模板语言。 10. **key 的使用** - **目的**：为每个节点提供唯一标识，帮助 Vue 的 Diff 算法高效地识别和更新虚拟 DOM。 11. **axios** - **功能**：一个基于 promise 的 HTTP 库，用于发送网络请求。 - **安装**：`npm install axios --save`，在 JS 中导入并使用 `.get` 或 `.post` 方法发送请求。 12. **v-model** - **作用**：实现表单数据的双向绑定，内部集成了 `v-bind`（绑定值）和 `v-on`（监听输入事件）。 13. **Vue CLI 项目结构** - **assets**：存放静态资源。 - **components**：组件文件夹。 - **router**：路由配置文件夹。 - **app.vue**：应用的主组件。 - **main.js**：项目的入口文件。 14. **computed 和 watch** - **computed**：用于计算属性，当多个属性影响一个属性时使用，自动监听依赖并缓存结果。 - **watch**：观察某个属性的变化，当一个属性变化时触发多个响应，适合复杂的数据响应。 15. **v-on 监听多个方法** - **支持**：可以使用对象语法监听多个事件，如 `v-on="{ event1: method1, event2: method2 }"`。 16. **$nextTick** - **用途**：在 DOM 更新之后执行回调，确保在数据变化和 DOM 渲染完成后再进行操作。 17. **组件中 data 必须是函数** - **原因**：保证每个组件实例都有独立的数据副本，避免数据污染和冲突。 以上是 Vue.js 面试题中涉及的关键知识点的详细解释，涵盖了 Vue 的核心特性和常见使用场景。理解并掌握这些知识点，有助于开发者在实际项目中更好地利用 Vue.js 构建应用程序。