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

目录

Vue是什么？v-if 和 v-show的区别？watch与compute的区别？使用过哪些前端组件？Vue父子组件如何进行交互？Vue的生命周期v-for指令中的key属性有什么用？

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触发更频繁，更消耗资源。

使用过哪些前端组件？

---

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

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

---

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

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

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

子组件中使用defineModel定义变量

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

Vue的生命周期

---

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

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

---

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