📃Vue 基础知识
Vue|2024-6-10|最后更新: 2024-6-10
思考
Vue
type
status
date
slug
summary
tags
category
icon
password

1.请简述 Vue 的特性

  • 数据驱动视图：在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化的时候，Vue会自动重新渲染页面
  • 双向绑定：Vue 实现是数据的双向绑定，当数据发生变化的时候，视图也会发生变化
  • 指令：指令主要包括内部指令和自定义指令，内部指令是 Vue 提供的指令，自定义指令是开发者自己定义的指令
  • 插件：Vue 支持插件，通过加载插件实现更多的功能
 

2.请简述 MVVM 的组成部分及工作原理

MVVM 主要包含 Model 数据模型、View 视图、ViewModel 视图模型，其中 Model 指的是数据部分，负责业务数据的处理，View 是视图的部分，即用户界面，负责视图处理，ViewModel 用于连接 Model 和 View 负责监听 Model 的变化或者 View 的变化
注意：View 和 Model 不能直接通信，需要借助 ViewModel 才能进行通信，VModel 相当于一个观察者，观察者 Model 和 View 的变化，实现了 Model 和 View 之间的解耦
notion image

3.请简述常见的事件修饰符

  • .prevent : 可以实现组织默认事件行为的功能
  • .stop : 可以实现组织事件冒泡的功能
  • .capture : 可以实现事件捕获的功能
  • .once : 可以实现事件只触发一次的功能
  • .self : 可以实现只有 DOM 元素自身触发事件时才执行事件方法的功能

4.请简述 v-if 和 v-show 的区别

  • v-if ：根据 Boolean 值判断元素是否显示或隐藏在页面上，当判断为 true 的时候，元素存在 DOM 元素中，当判断为 false 的时候，元素从 DOM 中移除
  • v-show：通过为元素添加或移除 display:none 来实现元素显示或隐藏在页面上
注意：需要频繁切换的元素，使用 v-show 合适，只显示一次的元素选择 v-if 合适

5. 代码，实现列表渲染（两种方法）

6.请简述组件之间的数据共享有哪几种方式

  • 通过 props 实现父组件向子组件中传递数据
  • 通过自定义事件实现子组件向父组件中传递数据
  • 通过依赖注入实现跨级组件之间的数据传递

7.请简述如何解决组件之间的样式冲突

  • scoped 属性
    • Vue 为 style 标签提供了 scoped 属性用于解决组件之间的样式冲突。例如
  • 深度选择器
    • 深度选择器通过 :deep()伪类来实现，在其小括号中可以定义用于子组件的选择器，例如

8.比较数字

9. Vue 3 中的生命周期函数有那些

  1. onBeforeUnMount() ：组件挂载到节点上之前执行的函数
  1. onMounted() ：组件完成挂载后执行的函数
  1. onBeforeUpdate() ：组件更新之前执行的函数
  1. onUpdate() ：组件更新完成之后执行的函数
  1. onBeforeUnmount() ：组件卸载之前执行的函数
  1. onUnmounted ：组件卸载完成之后执行的函数

10. 你了解的组件传值有哪几种，他们是如何实现的？

  1. props 传值：通过 props 从父组件向子组件传递数据，并且这种传递是单向的。当需要从子组件向父组件传递数据时，需要首先给子组件自定义事件并使用 $emit(事件名称, 传递数据) 方法触发函数，然后父组件通过 v-on 或 @监听子组件的事件
  1. v-model 传值：在子组件上使用 v-model 向父组件传值，实现双向绑定。在 Vue.js 中推荐使用一个空的 Vue 实例作为媒介，实现父组件与子组件之间的链通信
  1. provide 和 inject 传值： 有些时候子组件嵌套的很深，可以使用 provide 和 inject 实现组件链传值

11. 请简述自定义指令的分类

自定义指令分为 「私有自定义指令」或 「全局自定义指令」
  • 私有自定义指令：指的是在组件内部定义的指令，只能在定义该指令的组件内使用，不能在其他组件使用
  • 全局自定义指令：指的是全局定义的指令。全局自定义指令可以在全局使用 例如 Vue 项目中的 main.js 中的指令是全局使用的

12. 请简述 KeepAlive 组件的作用

在 Vue 中，KeepAlive 组件可以实现组件的缓存，KeepAlive 组件通过 <KeepAlive> 标签来定义，使用该标签包裹的组件就不会被销毁

13. 请简述如何实现路由重定向

路由重定向可以使用户在访问一个 URL 地址时，强制跳转到另一个 URL 地址，从而展示特定的组件，通过路由配置规则中的 redirect 属性可以指定一个新的路由地址，从而实现路由重定向

14. 请简述 route.push 和 router.go() 的区别

  • route.push() : push() 方法会向历史记录添加一条新的记录，以编程方式导航到一个新的 URL，当用户单击浏览器后退按钮的时候，会回到之前的 URL
  • route.go() : go() 方法用于实现前进和后退的效果，其参数标识历时记录中前进和后退的次数，类似与 windows.history.go() 响应的地址栏也会发生改变，go(1) 代表前进一条记录，go(-1) 代表后退一条记录

15. 请简述导航守卫中全局前置守卫参数 to、from、next 的含义

  • to：标识目标路由对象
  • from：标识当前导航要离开的路由对象
  • next：为 next 函数，如果接收了 next() 函数，则默认必须调用 next() 否则不允许用户访问任何一个路由

16 .请简述 Axios 的主要特性

  • 支持所有的 API
  • 支持所有的拦截请求和响应
  • 可以转化请求数据和响应数据，并可以将响应的内容自动转为 JSON 类型的数据
  • 安全性高，客户端支持防御跨越站请求伪造

17. 请简述 Vuex 中 state、mutations、getters、actions 和 modules 的作用

  • state：用于数据管理，且数据是响应式的，当数据改变时驱动视图更新，类似 Vue 实例中的 data 属性
  • mutations：用于数据更新，state 中的数据只能使用 mutations 改变数据，类似与 Vue 实例中的 methods 属性
  • getters：用于获取数据之前再次编译，得到新的数据。getter 知识对变量进行筛选、过滤、不会改变变量的本值操作，如过滤数组、获得数组和字符串长度等
  • actions：用于定义事件处理办法，把数据提交给 mutations 。actions 类似与 mutations ，不同之处在于 actions 可以进行异步操作，且不能直接修改 state
  • modules：用于定义模块对象。在项目开发中，页面组件存在多种状态，且所有的状态都会集中到一个对象中，当应用较为复杂时，store 对象可能会很臃肿，Vuex 为了解决这种复杂的应用状态，提出了类似模块化的开发方式以对 store 对象进行标准化管理
 
数据结构代综合应用题MyBatis 生成工具
Loading...