前端vue框架2023面试题

1.vue优点？ 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式； 运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。 2.vue父组件向子组件传递数据？ 答：通过props 3.子组件像父组件传递事件？ 答：$emit方法 Vue.js 是一款流行的前端JavaScript框架，由国人尤雨溪开发，专注于视图层，具有轻量级、简单易学、高效能的特点。Vue的核心特性包括双向数据绑定、组件化、虚拟DOM以及便捷的数据操作和视图更新机制。其设计思路是使得开发者能够更专注于数据逻辑，而不是DOM操作。 1. **Vue优点**： - **轻量级**：Vue的体积小巧，只有几十KB，这使得它在网页加载和运行时表现出较高的效率。 - **简单易学**：中文文档和国人的背景使得开发者更容易理解和上手。 - **双向数据绑定**：Vue继承了Angular的这一特性，简化了数据操作。 - **组件化**：Vue的组件系统类似于React，可以封装和重用HTML，适合构建复杂UI。 - **视图、数据、结构分离**：这种分离使得数据变化时，无需直接修改代码，仅需操作数据即可。 - **虚拟DOM**：Vue使用虚拟DOM提高性能，减少对真实DOM的操作，但实际仍然涉及DOM操作，只是方式更优化。 - **运行速度快**：相较于React，Vue在处理虚拟DOM时的性能更优。 2. **数据传递**： - **父组件向子组件传递数据**：通过`props`属性。 - **子组件向父组件传递数据**：使用`$emit`方法触发自定义事件。 3. **v-show与v-if**： - **共同点**：两者都能控制元素的可见性。 - **不同点**：v-show通过CSS的`display`属性切换，而v-if会动态地添加或移除DOM元素。频繁切换用v-show，首次渲染优化用v-if。 4. **CSS局部作用域**：在组件的`<style>`标签前加上`scoped`，确保样式只在当前组件生效。 5. **保持组件状态**：`<keep-alive>`组件用于缓存组件实例，保持其状态，避免重复渲染。 6. **获取DOM**：通过在模板中使用`ref`属性，然后在组件实例中通过`this.$refs.refName`获取。 7. **Vue指令**： - **v-model**：实现双向数据绑定，常用于表单元素。 - **v-for**：用于循环遍历数组或对象。 - **v-if/v-show**：根据条件决定元素是否渲染，v-if更适用于条件不频繁改变的情况。 - **v-on**：绑定事件监听器。 - **v-once**：只绑定一次，后续数据变化不再更新。 8. **vue-cli**： - `src`目录结构包括`assets`存放静态资源，`components`存储组件，`router`管理路由，`app.vue`是应用主组件，`main.js`是入口文件。 9. **计算属性（computed）与观察者（watch）**： - **computed**：当多个属性影响一个属性时，如计算总价，可使用计算属性。 - **watch**：当一个数据变动影响多个地方时，使用watch进行监听并执行相应操作。 10. **key的作用**：在虚拟DOM的Diff算法中，key用于标记节点，提高更新效率。 11. **axios**：一个常用的前端HTTP库，用于发送网络请求，如`npm install axios --save`安装后，通过`import`导入，使用`.get`或`.post`方法发送请求。 12. **v-model**：用于表单控件的双向数据绑定，结合v-bind和v-on的功能。 13. **$nextTick**：在数据改变后，等待DOM更新，然后在回调中访问最新DOM状态。 14. **data为何是函数**：在组件中，data必须是函数，因为每次组件实例化时，函数会返回一个新的数据对象，确保每个实例都有独立的数据副本，避免数据污染。