Java每日面试题（前端Vue拓展）(day20)

Vue是什么？

---

Vue是一个渐进式 JavaScript 框架，适合从小型项目到大型复杂应用。

• 核心特点：易用性、响应式系统、组件化、轻量级、丰富的生态系统。
• 主要概念：模板语法、指令、计算属性、组件、生命周期钩子，双向绑定，数据驱动视图。
• 常用工具：Vue Router、Vite

v-if 和 v-show的区别？

---

v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。
v-if显示隐藏是将dom元素整个添加或删除

如何选择：

• v-if 与 v-show 都能控制dom元素在页面的显示
• v-if 相比v-show 开销更大（直接操作dom节点增加与删除）
• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

watch与compute的区别？

---

watch用于监听数据的变化，监听的数据每次变化时都会触发，可在方法中对新值和旧值做一些操作。

computed是计算属性，可以对几个参数设置一个表达式，调用computed会得到表达式计算之后的结果。

区别：

• watch监听的参数变化时才会触发。
• computed中的任一个参数有变化，都会重新计算一下表达式的值。
• computed比watch触发更频繁，更消耗资源。

使用过哪些前端组件？

---

1. Element Plus：一个基于 Vue 3 的桌面端组件库，提供丰富的 UI 组件，帮助快速构建美观的用户界面。
2. Pinia：Vue 3 的状态管理库，提供简洁的 API 和类型支持，用于管理应用的全局状态。
3. Vite：由 Vue 作者开发的下一代前端构建工具，基于 ES 模块（ESM）提供快速的冷启动和热更新，大幅提升开发体验。
4. Axios：一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js，支持拦截请求和响应，处理错误等。
5. ECharts：一个由百度开源的图表库，提供丰富的图表类型和高度可定制的配置选项，用于数据可视化。
6. Vue Router：Vue.js 的官方路由管理器，用于构建单页面应用（SPA），支持嵌套路由、动态路由匹配等功能。

Vue父子组件如何进行交互？

---

Vue 3.4之后可使用defineModel进行父子组件的交互

1. 父组件中，在子组件标签上使用v-model绑定变量

   <Son v-model:name="name">
   

2. 子组件中使用defineModel定义变量

   //定义一个defineModel
   import {defineModel} from vue
   const a =defineModel("img")
   const b =defineModel()
   //绑定的变量名字默认为defineModel
   

Vue的生命周期

---

1. 创建阶段
   • beforeCreate：实例刚被创建，数据观测和事件配置尚未初始化。
   • created：实例已完成数据观测、属性和方法的运算，初始化事件，但尚未挂载到 DOM。
2. 挂载阶段
   • beforeMount：实例已编译模板，但尚未挂载到 DOM。
   • mounted：实例已挂载到 DOM，可以访问到真实的 DOM 元素。
3. 更新阶段
   • beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
   • updated：数据更新后，虚拟 DOM 重新渲染并打补丁到真实 DOM 之后调用。
4. 销毁阶段
   • beforeUnmount（Vue 3.x）：实例即将被销毁，可以在此执行清理操作。
   • unmounted（Vue 3.x）：实例已被销毁，所有绑定和事件监听器都被移除

v-for指令中的key属性有什么用？

---

key 属性给每个列表项提供唯一标识，帮助 Vue 高效更新和重用 DOM 元素，提高性能和稳定性，提高渲染效率。