📃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 之间的解耦
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 中的生命周期函数有那些
- onBeforeUnMount() :组件挂载到节点上之前执行的函数
- onMounted() :组件完成挂载后执行的函数
- onBeforeUpdate() :组件更新之前执行的函数
- onUpdate() :组件更新完成之后执行的函数
- onBeforeUnmount() :组件卸载之前执行的函数
- onUnmounted :组件卸载完成之后执行的函数
10. 你了解的组件传值有哪几种,他们是如何实现的?
- props 传值:通过 props 从父组件向子组件传递数据,并且这种传递是单向的。当需要从子组件向父组件传递数据时,需要首先给子组件自定义事件并使用
$emit(事件名称, 传递数据)
方法触发函数,然后父组件通过 v-on 或 @监听子组件的事件
- v-model 传值:在子组件上使用 v-model 向父组件传值,实现双向绑定。在 Vue.js 中推荐使用一个空的 Vue 实例作为媒介,实现父组件与子组件之间的链通信
- 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 对象进行标准化管理