目录
【高频】Vue中有时候数组会更新页面,有时候不更新,这是为什么
【高薪必问】 自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?(必会)
【一般】vue-router怎么配置路由(路由配置六个流程)
【几乎必问】Vue的路由实现模式:hash模式和history模式
01-vue学习精髓
-
1.数据驱动 : vue会自动渲染data中的数据, data中的数据变化了,页面会自动变化。
-
2.vue指令本质 : html标签自定义属性
-
作用:给html标签拓展功能(给原生html标签加buff)
-
语法:
-
HTML自定义属性规范:
属性名="属性值"
-
vue指令
v-指令名="指令值"
-
-
-
3.vue组件本质:html自定义标签
-
作用: 实现盒子复用
-
传统html标签:例如 <a>,<button>
-
只有html结构,没有
-
-
vue组件: 例如 <good></good>
-
有html结构,有css样式,有js逻辑
-
-
-
4.vue路由本质 : 监听hash,替换容器盒子(版心)
-
如果模式是hash,监听的是hash值变化
-
如果模式是history,监听的是路径变化。(需要后台配合)
-
-
5.学习vue路由,如何知道自己学的咋样?能分清下面几个单词,你的路由至少掌握了70%
-
routes : 数组。 路由匹配规则
-
router : 对象。 路由对象
-
$router : 对象。 用于跳转路由 和 传递参数
-
$route :对象。 用于接收路由跳转参数
-
02-vue面试题汇总
【一般】Vue的最大优势是什么?
-
比较轻量,中国人自己写的框架,文档易读(这里比较轻松,拿出平时和朋友聊天的语气)
-
下面几个,能说的越多越好
-
双向数据绑定,
-
数据驱动视图,
-
组件化开发
-
数据和视图分离
-
单页面应用可以实现页面数据局部刷新
-
【高频】MVVM和MVC区别是什么?
这道题可能只问MVVM, 也可能两个一起问
-
MVC : 传统的设计模式。
-
设计模式: 一套广泛被使用的开发方式
-
M: model 模型
-
模型:就是数据的意思
-
-
V : view视图
-
视图:就是页面的意思
-
-
C:controller控制器
-
控制器:在这里写js业务逻辑,把数据M 渲染到 视图 V (有点类似于我们之前学习的,把数据渲染到页面)
-
-
-
MVVC: vue所使用的设计模式
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)
-
MVVM,一种软件架构模式,决定了写代码的思想和层次
-
M: model数据模型 (data里定义)
-
V: view视图 (页面标签)
-
VM: ViewModel视图模型 (vue.js源码)
-
-
MVVM通过
数据双向绑定
让数据自动地双向同步 不再需要操作DOM-
V (修改视图) -> M(数据自动同步)
-
M(修改数据) -> V (视图自动同步)
-
1. 在vue中,不推荐直接手动操作DOM!!!
2. 在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!(思想转变)
【一般】Vue常用修饰符有哪些?
.prevent: 提交事件不再重载页面;
.stop: 阻止单击事件冒泡;
.once: 只执行一次这个事件
.enter:监听键盘enter键
【一般】对Vue渐进式的理解
-
官方专业答案
-
主张最少,
-
自底向上,
-
增量开发,
-
组件集合,
-
便于复用
-
-
个人见解
-
使用模块化规范,实现自助餐式开发,用什么导什么。 最大程度上节省资源。
-
【一般】说出至少4个Vue指令及作用
这道题还有一种问法:说出几个常用的vue指令
-
v-on 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
-
v-bind 动态绑定 作用: 及时对页面的数据进行更改, 可以简写成:分号
-
v-slot: 缩写为#, 组件插槽
-
v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
-
v-show 显示内容
-
v-if 显示与隐藏
-
v-else 必须和v-if连用 不能单独使用 否则报错
-
v-text 解析文本
-
v-html 解析html标签
【一般】为什么避免v-for和v-if在一起使用
-
Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.
【高频】v-show和v-if的区别
-
v-show和v-if的区别? 分别说明其使用场景?
-
相同点: v-show 和v-if都是true的时候显示,false的时候隐藏
-
不同点1:原理不同
-
v-show
:一定会渲染,只是修改display属性 -
v-if
:根据条件渲染
-
-
不同点2:应用场景不同
-
频繁切换用v-show,不频繁切换用v-if
-
【几乎必问】Vue中key值作用
key值作用逐字稿 : key值的作用是给元素添加一个唯一的标识符,提高vue渲染性能。当数据变化的时候,vue就会使用diff算法对比新旧虚拟Dom。 如果遇到相同的key值,则复用元素。如果遇到不同的key值则强制更新。
-
1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比, 如果dom结构一致,则vue会复用旧的dom。 (此时可能造成数据渲染异常)
-
2.使用key可以给dom添加一个 唯一标识符,让vue强制更新dom
【高频】Vue中:key作用, 为什么不能用索引
因为用了索引和没用, 没啥区别(用了等于没用)
-
:key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化
-
因为v-for数据项的顺序改变,Vue 也不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素
【高频】Vue中有时候数组会更新页面,有时候不更新,这是为什么
-
因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()
这些方法会触发数组改变, v-for会监测到并更新页面
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
这些方法不会触发v-for更新
-
slice()
-
filter()
-
concat()
【高频】 方法和计算属性和侦听器区别
面试点 : 侦听器和计算属性区别 (1)计算属性有缓存机制,侦听器没有 (2)计算属性不支持异步操作, 侦听器支持异步操作 (3)计算属性是一个额外新增的属性, 侦听器只能侦听data中的属性 (4)计算属性有返回值return,侦听器不需要return (5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了,就会执行计算属性方法), 侦听器只能侦听一个数据的变化。
-
方法
-
需要主动调用触发
-
不会缓存
-
-
计算属性
-
监听多个属性:只要计算属性内部数据变化就会触发
-
有缓存机制(必须要说的)
-
-
侦听器
-
监听一个属性
-
watch支持异步
-
不会缓存(这个可以不用回答)
-
【一般】请说下封装 vue 组件的过程
高逼格答案: 有复用的地方就有封装
(js如此,vue也是如此)
-
1.先分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能
-
找出业务需求中存在复用的地方
-
-
2.具体步骤:Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值,子组件修改好数据后,想把数据传递给父组件。可以采用$emit方法
【几乎必问】vue组件传值
-
父传子
-
-
子组件props定义变量
-
-
2.父组件在使用子组件时通过行内属性给props变量传值
-
特点:单向数据流
-
-
子传父
-
1.子组件:$emit触发父的事件
-
2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)
-
特点:事件监听
-
-
非父子组件
-
vuex
-
【高频】Vue 组件 data 为什么必须是函数
-
因为组件是需要在多个地方使用的
-
如果data是一个对象,对象是引用类型。 一旦某一个地方修改,就会全部修改
-
data是一个函数,每一次复用组件的时候就会从这个函数返回一个新的对象。 这样组件在复用的时候就可以做到数据互不干扰。
-
【一般】讲一下组件的命名规范
-
给组件命名有两种方式(在Vue.Component/components时),一种是使用链式命名"my-component",一种是使用大驼峰命名"MyComponent",
-
因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符),避免和当前以及未来的 HTML 元素相冲突
【高频】scoped作用与原理
-
作用:组件css作用域,避免
子组件
内部的css样式被父组件
覆盖-
默认情况下,如果子组件和父组件css选择器权重相同,优先加载父组件css样式
-
-
原理:给元素添加一个自定义属性 v-data-xxxxx
-
一针见血答案
: 通过属性选择题来提高css权重值
-
==【百分百必问】==vue生命周期总共分为几个阶段?
核心: 四个阶段8个勾子
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
1**)beforeCreate**
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2**)created**
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
3**)beforeMount**
在挂载开始之前被调用:相关的 render 函数首次被调用。
4**)mounted**
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
5**)beforeUpdate**
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
6**)updated**
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
7**)activated**
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
8**)deactivated**
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
9**)beforeDestroy**
实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
10**)destroyed**
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11**)errorCaptured(2.5.0+ 新增)**
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
==【百分百必问】==第一次加载页面会触发哪几个钩子函数?
-
四个钩子
-
beforeCreate,
-
created,
-
beforeMount,
-
mounted 这几个钩子函数
-
【高薪必问】Vue 的 nextTick 的原理是什么?
-
1为什么需要 nextTick
-
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)这个 api 了。
-
-
2.知识储备(可以不说,但是自己要知道,以防不测)
-
事件循环中宏任务和微任务这两个概念
-
常见的宏任务有 script, setTimeout, setInterval, setImmediate(一种执行更加频繁的定时器)
-
常见的微任务有 ,Promise.then(), async
-
-
3.最终答案:
-
nextTick 的原理是
vue 通过异步队列控制 DOM 更新
-
nextTick底层是promise,所以是微任务。这个一定要知道
-
-
(这个是官方语言,说不说看你自己心情) : nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中做了很多 isNative()的判断,因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑,对性能的良苦用心。
-
-
4.小科普:其实vue在版本更新的时候。 时而将nextTick封装成宏任务,时而将nextTick封装成微任务。 不过目前vue2最新的版本,
nextTick底层是微任务
-
课外阅读nextTick源码:Vue的nextTick具体是微任务还是宏任务? - 掘金
-
【高薪必问】v-slot插槽与作用域插槽
-
1.插槽作用:父组件 传递
html结构
给 子组件 -
2.具名插槽作用:父组件 传递
多个html结构
给 子组件 -
3.作用域插槽作用:父组件 给 子组件 传递插槽 时,可以使用子组件内部的数据
插槽使用2个步骤
第一步:在
子
组件中定义一个插槽<slot>默认值:如果父组件没有传递则默认显示</slot>
第二步:在
父
组件中传递结构:<子组件>父组件需要传递的结构</子组件>
具名插槽语法如下
1.给子组件的<slot>添加name属性 :
name="插槽名"
2.父组件使用
v-slot:插槽名
: 给指定的插槽传递结构
注意:这个v-slot指令必须要写在
<template>
标签中,否则会报错
<template>
是HTML5新增的一个语义化标签,模板的意思。 这个标签本身不会被渲染,因此最终在页面是看不见的。 这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染。
作用域插槽语法如下
1.给子组件的<slot>添加一个自定义属性 :
<slot :属性名="属性值" ></slot>
2.给父组件的<template>添加v-slot属性接收数据:
<template v-slot="对象名"></template>
父组件使用子组件内部数据语法:
对象名.属性名
注意点
: 不要把具名插槽语法
和作用域插槽
语法搞混淆具名插槽:
<template v-slot:name值></slot>
作用域插槽:
<template v-slot="对象名"></slot>
【高薪必问】 自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?(必会)
-
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
-
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
-
钩子函数参数:el、binding
##【高薪必问】 is这个特性你有用过吗?主要用在哪些方面?
is作用:用于动态组件
-
1.动态组件
-
<component :is="componentName"></component>
, componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。 -
2.is的用法
-
有些HTML元素,诸如 <ul>、<ol>、<table>和<select>,对于哪些元素可以出现在其内部是有严格限制的。
-
而有些HTML元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。
-
<ul> <card-list></card-list> </ul>
-
所以上面<card-list></card-list>会被作为无效的内容提升到外部,并导致最终渲染结果出错。应该这么写:
<ul> <li is="cardList"></li> </ul>
【高薪必问】vue路由作用与原理
-
路由作用: 实现单页面应用
-
原理:监听location的hash值
【高频】路由之间是怎么跳转的?有哪些方式
-
1、<router-link to="需要跳转到页面的路径">
-
2、this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回到上一个页面
-
3、this.$router.replace()跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面
-
4、this.$touter.go(n)向前或者后跳转n个页面,n可以是正数也可以是负数
【一般】vue-router怎么配置路由(路由配置六个流程)
-
1.引入组件
-
2.配置路由path和组件, 和生成路由对象routes
-
3.创建路由对象router
-
4.把路由对象挂载到new Vue()
-
5.页面使用<router-view></router-view> 承载路由
-
6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)
【高频】vue-router的钩子函数都有哪些(导航守卫)
-
关于vue-router中的钩子函数主要分为3类
-
1.全局钩子函数beforeEach(全局前置守卫,所有路由生效)
-
beforeEach函数有三个参数,分别是:
-
to:router即将进入的路由对象
-
from:当前导航即将离开的路由
-
next:function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的)否则为false,终止导航。
-
-
-
2.单独路由独享组件(只对这个路由生效)
* beforeEnter,
-
3 组件内钩子
-
beforeRouterEnter,(渲染路由组件前)
-
beforeRouterUpdate,(路由改变)
-
beforeRouterLeave(路由离开)
-
【高频】路由传值的方式有哪几种
跳转方法 | 传参位置 | 路由规则 | 接收 |
---|---|---|---|
<router-link to="/path?key=value"></router-link> | /path?key=value | 无特殊 | $route.query.key |
<router-link to="/path/值"></router-link> | /path/值 | /path/:key | $route.params.key |
this.$router.push({path: "/path", query: {key: value}}) | query的对象 | 无特殊 | $route.query.key |
this.$router.push({name: "com", params: {key: value}) | params的对象 | 路由规则需要name属性 | $route.params.key(注意,这种在内存中保存) |
-
Vue-router传参可以分为两大类,分别是编程式的导航 router.push和声明式的导航
-
1.编程式导航:router.push
-
字符串:直接传递路由地址,但是不能传递参数
-
this.$router.push("home")
-
-
对象:
-
命名路由 这种方式传递参数,目标页面刷新会报错 - name+params
-
this.$router.push({name:"news",params:{userId:123})
-
-
查询参数 和path配对的是query
-
this.$router.push({path:"/news',query:{uersId:123})
-
-
接收参数 this.$route.query
-
-
2.声明式导航
-
字符串 <router-link to:"news"></router-link>
-
命名路由 <router-link :to:"{name:'news',params:{userid:1111}}"></route-link>
-
还可以to="/path/值" - 需要提前在路由 规则里值 /path/:key
-
查询参数 <router-link :to="{path:'/news',query:{userId:1111}}"></router-link>
-
还可以to="/path?key=value
-
-
【几乎必问】Vue的路由实现模式:hash模式和history模式
1.路径不同
hash有#, history没有#
2.工作模式不同
hash : 修改当前页面hash,不需要服务器额外配置
history: 会给服务器发送请求,需要服务器配置
-
1.hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用 window.location.hash 读取。特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
-
2.history模式:history采用HTML5的新特性;且提供了两个新方法: pushState(), replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更
【几乎必问】请说出路由配置项常用的属性及作用
-
路由配置参数:
-
path : 跳转路径
-
component : 路径相对于的组件
-
name:命名路由
-
children:子路由的配置参数(路由嵌套)
-
props:路由解耦
-
redirect : 重定向路由
-
【高频】$route和$router的区别?
-
routes : 数组。 路由匹配规则
-
router : 对象。 路由对象
-
$router : 对象。 用于跳转路由 和 传递参数
-
$route :对象。 用于接收路由跳转参数
【高频】跟keep-alive有关的生命周期是哪些?
-
1.前言:在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染,在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染
-
2.生命周期函数:在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。
-
activated钩子:
在在组件第一次渲染时会被调用
,之后在每次缓存组件被激活时调用。 -
Activated钩子调用时机:
第一次进入缓存路由/组件
,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发 -
deactivated钩子:
组件被停用(离开路由)时调用
-
deactivated钩子调用时机:使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
-
-
【高频】vuex作用及五大组成部分
-
vuex作用: 全局数据管理 解决复杂的父子组件传值
-
state作用:存储数据
-
getter作用:派生数据。相当于state计算属性
-
mutations作用:修改state中的数据
-
actions作用: 异步更新数据
-
module作用:模块化处理vuex数据
【一般】vuex中action工作流程
-
1.组件给actions发送消息
-
2.actions异步请求数据
-
3.actions将请求到的数据提交给mutations
-
4.mutations同步更新state中的数据
【几乎必问】说一下你在vue中踩过的坑
-
1操作data中的数据,发现没有响应式
-
原因: 数组中有很多方法,有的会改变数组(例如pop push),有的不会改变数组(例如slice, filter)
-
解决方案:通过Vue.set(对象,属性,值)这种方式就可以达到,对象新添加的属性是响应式的
-
-
2.在created操作dom的时候,是报错的,获取不到dom,这个时候实例vue实例没有挂载
-
解决方案:Vue.nextTick(回调函数进行获取
-
-
3.其他的可以自由发挥,只要不是太低级就可以(比如,单词写错,代码位置写错,这种就是低级问题。其他的都可以说,千万别说这两个)