vue2的知识点加面试题/及常见的面试ti

氼乚123

已于 2022-09-01 10:06:00 修改

阅读量375

点赞数

分类专栏： vue2 文章标签：前端 vue

于 2022-08-29 11:20:22 首次发布

本文链接：https://blog.csdn.net/m0_65478651/article/details/126580342

版权

vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目创建的方式

vue create name 命令行的方式
vue ui 图形化方式创建

项目中的命令

首先在cmd命令行窗口中确认是在项目的根目录中，才能正确的启动命令
开发环境命令：npm run serve
打包编译命令：npm run build

vue2里的核心特点--数据的双向绑定【响应】

v-model 是双向数据绑定指令
原理：基于Object.defineProperty()封装的

指令

v-model 默认只用于表单元素，数据双向绑定指令，基于：Object.defineProperty()封装
v-text 渲染文本指令，和{{}}插值语法等同，唯一的区别就是过滤器只能用于插值不能用于指令，基于innerText
v-html 渲染dom指令，包含v-text指令的功能，同时可以把字符串dom变成真的dom元素，基于innerHTML
v-show 控制元素的css样式的display属性，对于元素的性能开销最小，如果频繁切换优先使用
v-if 控制元素的加载与销毁，会频繁的触发元素的生命周期，性能开销大，一般不推荐使用
v-for 循环渲染指令，可以渲染的值类型有：数组、数字、字符串还有对象
v-bind: 属性绑定指令，原生属性绑定[样式，类名]，自定义属性,缩写是：:
v-on: 事件绑定指令，原生事件绑定[click]，自定义事件，缩写是:@
v-pre:原格式输出值
v-once:永远只渲染第一次的值
v-cloak:防止闪烁

修饰符

指令修饰符

v-model有:trim去掉所有空格
number:把输入的值转成number
lazy（懒加载）: 实时触发变成失去焦点后触发

事件修饰符

stop：阻止事件冒泡
prevent：阻止默认行为
native：把vue事件转成原生事件，多用于自定义组件上绑定事件
capture：事件捕获

混入 mixins

特点：组件瘦身，功能复用。
如果组件里的属性和混入里的名字一样，会用组件内的替代混入文件里的，但是生命周期会保留

监听器和计算属性区别

监听器

watch

计算属性

computed

不同点

computed有缓存,watch没有缓存
watch是对值的监听,值发生改变watch就会触发.computed是对值监听并且返回一个新值,被监听的值改变以后重新计算.
watch里可以写异步操作,computed因为需要立即return所以不能有异步操作
watch每次只能监听一个数据,computed可以一次监听多个数据,只要其中一个数据改变就会重新计算
语法不同:watch对于数组对象需要开启深度监听,如果只想监听对象的某个数据使用点语法.计算属性没有数据类型的限制,但是如果要对计算属性的值重新赋值,需要写出对象的写法,使用get和set.

自定义指令 directive

全局使用vue.directive
组件内使用directives 指令,都是给标签身上附加的高级功能.
bind 第一次绑定,执行一次
inserted 元素挂载到页面,执行一次
componentUpdated 元素更新

过滤器 filter

接收一个值返回一个新值,不对原始数据修改,使用管道福和数据隔开,多个过滤器使用过个管道福隔开

vue-router

路由【组件】的懒加载：使用函数返回一个import方法，在import方法里面加载组件路径，import方法会返回一个promise对象，只有当用户手动切换当前的路由中，才会去加载这个组件。
$router和$route的区别？答：router是new VueRouter的实例对象，表示当前项目中整个的路由实例，拥有全部的路由功能，而route仅仅表示当前路由的信息
路由传参

query：在地址中，使用get方式显示：?key=value&key=value
params：多个地址加载同一个组件，使用/:动态参数接收不同的值，其原理就是动态路由
元信息
router-view：通过组件传参，凡是背router-view加载出来的视图组件，都会被传入自定义组件

路由守卫 | 路由的拦截器 | 路由的生命周期

全局的守卫
- beforeEach：前置守卫【路由的鉴权】
- afterEach：后置守卫【作用很小】
路由独享守卫【路由配置里】
- beforeEnter：进入前确认【打酱油的】
组件内路由守卫【组件用的】
- beforeRouteEnter：组件加载前再次确认
- beforeRoutneUpdate：【最重要】当前页面不销毁，但是地址在变化，用于获取路由最新信息的函数
- beforeRouteLeave：离开当前路由组件前

动态路由和嵌套路由

动态路由：/path/:xx一个路由匹配多个地址加载的是同一个组件
嵌套路由：一个父路由里有children子路由

路由元信息

meta对象来传递数据

动态添加路由

addRoute 只能添加一条路由匹配对象
addRoutes 可以添加一组路由匹配对象

路由模式都是基于导航对象封装的，分别是history滑入hash对象

history 历史记录对象封装
hash 锚点方式，用#表示路径
abstract 适用于nodejs环境下
区别是：hash不会发起真正的url请求，而history会发起真正的请求

vuex 全局状态管理器

state 核心状态管理对象

getters 相等于计算属性，对state进行计算并且返回新值

mutations 同步方法，修改state的

actions 动作：处理异步

module 模块

plugins 插件

strict 严格模式

组件通信

父传子：父组件给子组件绑定一个属性，子组件使用props接收
子传父：父组件给子组件绑定一个事件，子组件使用$emit去调用事件函数
兄弟：所有的子组件通过同一个父组件进行数据的交换
.sync 伪数据双向绑定：属性修饰符，子组件使用固定语法调用this.$emit('update:xx',val)
v-model 数据双向绑定：会向子组件注入一个value属性和input事件

6.$root：获取根实例对象
$parent：获取直接父组件实例对象
$children：直接子组件实例集合
$refs：获取子组件实例集合

evenBus中央事件池，基于new了一个vue实例对象
高级用法

$sttrs向后代传递了样式之外的所有属性
$listeners向后代传递函数

大型的数据共享：vuex

内置组件

component 动态加载组件--动态加载组件

这个组件必须要有一个is属性，用来加载对应的组件名称
为了满足需要大量手写自定义组件的场景，实现tab选项卡

keep-alive 缓存组件-缓存组件的状态

把组件的所有被改变的状态都会存储起来
组件属性：exclude 把不想被缓存的组件名字写入，该组件就不会被缓存
组件属性：include 只缓存被包含的组件，其他不写入组件名字的组件则不会被缓存

slot 插槽

匿名插槽：无论组件内部被插入任何内容，都会被slot标签接收，常用语纯静态的可复用的dom结构中
具名插槽：父组件使用template标签使用v-slot:name加名字，插槽组件使用slot标签的name属性接收
作用域插槽：父组件在template标签使用v-slot:name='接收值'子组件在slot标签绑定属性传参

v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?

1.v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.

2.v-for和v-if不能同时使⽤，项目需要我们可以利用计算属性先过滤符合条件的数据，然后再输出

说一下props数据类型验证

在父传子的过程中，我们可以在子组件中通过props属性来规范父组件传递的数据类型，语法是要通过props对象形式的来接受数据，type是可以传递的数据类型，如果数据类型不匹配就会报警告。props可以验证的数据类型有：String Number Boolean Array Object Date Function 等

组件写name有什么好处

1、增加name属性，会在components属性中增加组件本身，实现组件的递归调⽤。

2、可以表示组件的具体名称，⽅便调试和查找对应的组件。

说一下你对插槽的理解

插槽就是在子组件中用<slot>标签括起来来的一块区域，用来展示父组件传递的结构。插槽分为匿名插槽具名插槽和作用域插槽。

匿名插槽也是默认插槽，如果不指定名字所有的数据都会展示在匿名插槽上

具名插槽是我们常用的插槽，可以在父组件中通过v-slot:name来指定数据在哪个明子插槽上展示

作用域插槽使用子组件中的数据可以使用作用域插槽来拿,语法就是通过在子组件标签上的slot绑定一个自定义属性，然后在父组件中通过v-slot:name="变量"来拿到子组件传递的作用域数据，这个数据仅限于此插槽中

说⼀下vue和jquery的区别?

⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,通过diif算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染. ⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,以上就是我对vue和jquery区别的理解.

说一下axios的拦截器

⾸先呢,axios拦截器是axios给我们提供的两个⽅法,通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处理(拦截). 这两个拦截器不需要⼿动触发,只要发送http请求的时候就会⾃动触发. 我在项⽬中经常通过请求拦截器发送token, 对token进⾏过期处理,以及设置数据的loading加载等进⾏其他的⼀些操作

怎样理解 Vue 的单向数据流

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。 注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法开发环境会报警告 如果实在要改变⽗组件的 prop 值可以再 data ⾥⾯定义⼀个变量并⽤ prop 的值初始化它之后⽤$emit 通知⽗组件去修改

虚拟 DOM 是什么? 有什么优缺点?

什么是虚拟dom? 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 所以在vue中将真实的DOM节点抽离成⼀个虚拟的DOM树,这个虚拟的DOM树就是虚拟DOM.

优点：

保证性能下限框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作，它的⼀些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的
⽆需⼿动操作 DOM：我们不再需要⼿动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定
跨平台：虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关，相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作

缺点：⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

Vue的diff算法原理是什么？

Vue的diff算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较 1、先⽐较两个节点是不是相同节点

2、相同节点⽐较属性，复⽤⽼节点

3、先⽐较⼉⼦节点，考虑⽼节点和新节点⼉⼦的情况

4、优化⽐较：头头、尾尾、头尾、尾头

5、⽐对查找，进⾏复⽤

为什么vue中data必须是⼀个函数

如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果。所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关

$nextTick⽅法有什么作⽤

⾸先呢, 也叫做异步更新队列方法而方法的主要作用就是等待元素加载完毕之后才会执行的回调函数我们经常会在$nextTick⽅法⾥⾯获取dom元素

vue双向数据绑定原理?

vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调。这个时候就可以实现数据的双向绑定

vue常⽤的指令有哪些要背含义?

v-html 解析输出变量能解析html

v-text 解析输出变量

v-bind 给标签绑定属性可以简写为 :属性名=“变量”

v-on 给元素绑定事件用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”

v-model 实现数据的双向绑定只能适用于表单元素

v-for 可以循环遍历数据

v-if 条件输出

v-show条件输出

vue常⽤的修饰符有哪些?

trim 去除⾸尾多余的空格
.stop 阻⽌事件冒泡
.once 只渲染⼀次
.self 事件只作⽤在元素本身
.number 将值转化为number类型
.capter 组件之间捕获
.prevent 阻⽌元素的默认⾏为
.native 事件穿透,让我们可以在⾃定义组件上定义事件和⽅法

说⼀下你对keep-alive的理解?以及在项⽬中如何使⽤

keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤keep-alive来实现

在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下⼀次显示时，也不会重新渲染。 include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max-数字最多可以缓存多少组件。

使用keep-alive会增加两个钩子函数activated () 进入缓存页面的使用执行 deactivated()离开缓存页面的使用被执行