vue2021面试（2022 最新 Vue 3.0 面试题）
1 、Vue 的最大的优势是什么？（必会）
Vue 作为一款轻量级框架 、简单易学 、双向数据绑定 、组件化 、数据和结构的分离 、虚拟
DOM 、运行速度快 ，并且作者是中国人尤雨溪 ，对应的 API 文档对国内开发者优化 ，作为前端
开发人员的首选入门框架
Vue 的优势：
1 、Vue.js 可以进行组件化开发 ，使代码编写量大大减少 ，读者更加易于理解 。
2 、Vue.js 最突出的优势在于可以对数据进行双向绑定 。
3 、使用 Vue.js 编写出来的界面效果本身就是响应式的 ，这使网页在各种设备上都能
显示出非常好看的效果 。
4 、相比传统的页面通过超链接实现页面的切换和跳转 ，Vue 使用路由不会刷新页
面 。
5 、vue 是单页面应用 ，使页面局部刷新 ，不用每次跳转页面都要请求所有数据和
dom ，这样大大加快了访问速度和提升用户体验 。
6 、而且他的第三方 UI 组件库使用起来节省很多开发时间 ，从而提升开发效率 。2 、Vue 和 jQuery 两者之间的区别是什么？（必会）
1 、jQuery 介绍：
jQuery 曾经也是现在依然最流行的 web 前端 js 库 ，可是现在无论是国内还是国外他的使
用率正在渐渐被其他的 js 库所代替 ，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏
览器端的实现 ，jQuery 的使用率将会越来越低
2 、vue 介绍：
vue 是一个兴起的前端 js 库 ，是一个精简的 MVVM 。从技术角度讲 ，Vue.js 专注于 MVVM
模型的 ViewModel 层 。它通过双向数据绑定把 View 层和 Model 层连接了起来 ，通过对数
据的操作就可以完成对页面视图的渲染 。当然还有很多其他的 mvmm 框架如 Angular ，react 都
是大同小异 ，本质上都是基于 MVVM 的理念 ，然而 vue 以他独特的优势简单 ，快速 ，组合 ，紧
凑 ，强大而迅速崛起
3 、vue 和 jQuery 区别：
3.1）vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象 ，对其进行赋值 、取
值 、事件绑定等操作 ，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对
象 ，而数据和界面是在一起的3.2）比如需要获取 label 标签的内容：）选取 DOM 对象 ，对其进行赋值 、取值 、事件
绑定等操作 ，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象 ，而数据
和界面是在一起的
3.3）比如需要获取 label 标签的内容：(“lable ”).val();,它还是依赖 DOM 元素的值 。
Vue 则是通过 Vue 对象将数据和 View 完全分离开来了
3.4）对数据进行操作不再需要引用相应的 DOM 对象 ，可以说数据和 View 是分离的 ，
他们通过 Vue 对象这个 vm 实现相互的绑定 ，这就是传说中的 MVVM3 、MVVM 和 MVC 区别是什么？哪些场景适合？（必会）
1 、基本定义
1.1）MVVM 基本定义
MVVM 即 Model-View-ViewModel 的简写 ，即模型-视图-视图模型 ，模型（Model）
指的是后端传递的数据 ，视图(View)指的是所看到的页面 ，视图模型(ViewModel)是 mvvm 模式
的核心 ，它是连接 view 和 model 的桥梁 。它有两个方向：
1.1.1）一是将模型（Model）转化成视图(View) ，即将后端传递的数据转化成所看到
的页面 ，实现的方式是：数据绑定 ，
1.1.2）二是将视图(View)转化成模型(Model) ，即将所看到的页面转化成后端的数据 。
实现的方式是：DOM 事件监听 ，这两个方向都实现的 ，我们称之为数据的双向绑定
1.2）MVC 基本定义
MVC 是 Model-View- Controller 的简写 。即模型-视图-控制器 。M 和 V 指的意思和
MVVM 中的 M 和 V 意思一样 。C 即 Controller 指的是页面业务逻辑 ，使用 MVC 的目的就是将
M 和 V 的代码分离 。MVC 是单向通信 。也就是 View 跟 Model ，必须通过 Controller 来承上启
下
2 、使用场景
主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel ，MVVM 主要解决了 MVC
中大量的 DOM 操作使页面渲染性能降低 ，加载速度变慢 ，影响用户体验 ，vue 数据驱动 ，通
过数据来显示视图层而不是节点操作 ， 场景：数据操作比较多的场景 ，需要大量操作 DOM 元
素时 ，采用 MVVM 的开发方式 ，会更加便捷 ，让开发者更多的精力放在数据的变化上 ，解放繁
琐的操作 DOM 元素
3 、两者之间的区别
MVC 和 MVVM 其实区别并不大 ，都是一种设计思想 ， MVC 和 MVVM 的区别并不是
VM 完全取代了 C ，只是在 MVC 的基础上增加了一层 VM ，只不过是弱化了 C 的概念 ，
ViewModel 存在目的在于抽离 Controller 中展示的业务逻辑 ，而不是替代 Controller ，其它视图
操作业务等还是应该放在 Controller 中实现 ，也就是说 MVVM 实现的是业务逻辑组件的重用 ，
使开发更高效 ，结构更清晰 ，增加代码的复用性4 、Vue 数据双向绑定的原理是什么?（必会）
V ue.js 是采用数据劫持结合发布者-订阅者模式的方式 ，通过 Object.defineProperty()来劫
持各个属性的 setter ，getter ，在数据变动时发布消息给订阅者 ，触发相应的监听回调 。1 、需要 observe 的数据对象进行递归遍历 ，包括子属性对象的属性 ，都加上 setter 和
getter ，这样的话 ，给这个对象的某个值赋值 ，就会触发 setter ，那么就能监听到了数据变化
2 、compile 解析模板指令 ，将模板中的变量替换成数据 ，然后初始化渲染页面视图 ，并将
每个指令对应的节点绑定更新函数 ，添加监听数据的订阅者 ，一旦数据有变动 ，收到通知 ，更
新视图
3 、Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要做的事情是:
3.1）在自身实例化时往属性订阅器(dep)里面添加自己
3.2）自身必须有一个 update()方法
3.3）待属性变动 dep.notice()通知时 ，能调用自身的 update()方法 ，并触发 Compile
中绑定的回调 ，则功成身退 。
4 、MVVM 作为数据绑定的入口 ，整合 Observer 、Compile 和 Watcher 三者 ，通 Observer
来监听自己的 model 数据变化 ，通过 Compile 来解析编译模板指令 ，最终利用 Watcher 搭起
Observer 和 Compile 之间的通信桥梁 ，达到数据变化 -> 视图更新；视图交互变化(input) ->
数据 model 变更的双向绑定效果5 、Object.defineProperty 和 Proxy 的区别（必会）
Object.defineProperty 和 Proxy 的区别如下:
1 、Proxy 可以直接监听对象而非属性；
2 、Proxy 可以直接监听数组的变化；
3 、Proxy 有多达 13 种拦截方法,不限于 apply 、ownKeys 、deleteProperty 、has 等等
是 Object.defineProperty 不具备的
4 、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而
Object.defineProperty 只能遍历对象属性直接修改
5 、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化 ，也就是传说中的新标准
的性能红利
6 、Object.defineProperty 兼容性好 ，支持 IE9 ，而 Proxy 的存在浏览器兼容性问题,
而且无法用 polyfill 磨平 ，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重
写6 、Vue 生命周期总共分为几个阶段？（必会）
Vue 实例从创建到销毁的过程 ，就是生命周期 。也就是从开始创建 、初始化数据 、编译模
板 、挂载 Dom→渲染 、更新→渲染 、卸载等一系列过程 ，我们称这是 Vue 的生命周期 。
1 、beforeCreate
在实例初始化之后 ，数据观测 (data observer) 和 event/watcher 事件配置之前被调
用
2 、created
在实例创建完成后被立即调用 。在这一步 ，实例已完成以下的配置：数据观测 (data
observer)属性和方法的运算 ，watch/event 事件回调 。然而 ，挂载阶段还没开始 ，$el 属性目
前不可见
3 、beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用
4 、mounted
el 被新创建的 vm.e
l
替换 ，并挂载到实例上去之后调用该钩子 ，如果
r
o
o
t
实例挂载了一个文档内元素 ，当
m
o
u
n
t
e
d
被调用时
v
m
.
el 替换 ，并挂载到实例上去之后调用该钩子 ，如果 root 实例挂载了 一个文档内元素 ，当 mounted 被调用时 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 以阻止该错误继
续向上传播7 、第一次加载页面会触发哪几个钩子函数？（必会）
当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩
子函数8 、请说下封装 Vue 组件的过程？（必会）
首先 ，组件可以提升整个项目的开发效率 。能够把页面抽象成多个相对独立的模块 ，解决
了我们传统项目开发：效率低 、难维护 、复用性等问题
1 、分析需求：确定业务需求 ，把页面中可以服用的结构 ，样式以及功能 ，单独抽离成一
个文件 ，实现复用
2 、具体步骤：使用 Vue.extend 方法创建一个组件 ，然后使用 Vue.component 方法注册组
件 ，子组件需要数据 ，可以在 props 中接受定义 ，而子组件修改好数据后 ，想把数据传递给父
组件 ，可以采用$emit 方法9 、Vue 组件如何进行传值的? （必会）
1 、父组件向子组件传递数据
父组件内设置要传的数据 ，在父组件中引用的子组件上绑定一个自定义属性并把数据
绑定在自定义属性上 ，在子组件添加参数 props 接收即可
2 、子组件向父组件传递数据
子组件通过 vue 实例方法e
m
i
t
进行触发并且可以携带参数 ，父组件监听使用
@
（
v
−
o
n
）进行监听 ，然后进行方法处理
3
、非父子组件之间传递数据
3.1
引入第三方
n
e
w
v
u
e
定义为
e
v
e
n
t
B
u
s
3.2
）在组件中
c
r
e
a
t
e
d
中订阅方法
e
v
e
n
t
B
u
s
.
emit 进行触发并且可以携带参数 ，父组件监听使用@（v- on）进行监听 ，然后进行方法处理 3 、非父子组件之间传递数据 3.1 引入第三方 new vue 定义为 eventBus 3.2）在组件中 created 中订阅方法 eventBus.
emit进行触发并且可以携带参数 ，父组件监听使用@（v−on）进行监听 ，然后进行方法处理3 、非父子组件之间传递数据3.1引入第三方newvue定义为eventBus3.2）在组件中created中订阅方法eventBus.on(“自定义事件名 ”,methods 中的方法
名)
3.3) 在另一个兄弟组件中的 methods 中写函数 ，在函数中发布 eventBus 订阅的方法
eventBus.$emit("自定义事件名 ”)
3.4) 在组件的 template 中绑定事件(比如 click)10 、组件中写 name 选项有什么作用？（必会）
1 、项目使用 keep-alive 时 ，可搭配组件 name 进行缓存过滤
2 、DOM 做递归组件时需要调用自身 name
3 、vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的11 、Vue 组件 data 为什么必须是函数（必会）
1 、个组件都是 Vue 的实例
2 、组件共享 data 属性 ，当 data 的值是同一个引用类型的值时 ，改变其中一个会影响其他
3 、组件中的 data 写成一个函数 ，数据以函数返回值形式定义 ，这样每复用一次组件 ，就
会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间 ，让各个组件实例维护
各自的数据 。而单纯的写成对象形式 ，就使得所有组件实例共用了一份 data ，就会造成一个变
了全都会变的结果12 、讲一下组件的命名规范（必会）
给组件命名有两种方式 ，一种是使用链式命名 my-component ，一种是使用大驼峰命名
MyComponent 在字符串模板中 和
都可以使用 ，在非字符串模板中最好使用
，因为要遵循 W3C 规范中的自定义组件名 (字母全小写且
必须包含一个连字符) ，避免和当前以及未来的 HTML 元素相冲突13 、怎么在组件中监听路由参数的变化？（必会）
有两种方法可以监听路由参数的变化 ，但是只能用在包含的组件内 。
第一种
watch: {
‘$route’(to, from) {
// 在此处监听
},
},
第二种
beforeRouteUpdate (to, from, next) {
//这里监听
}14 、怎么捕获 Vue 组件的错误信息？（必会）
1 、errorCaptured 是组件内部钩子 ，当捕获一个来自子孙组件的错误时被调用 ，接收
error 、vm 、info 三个参数 ，return false 后可以阻止错误继续向上抛出
2 、errorHandler 为全局钩子 ，使用 Vue.config.errorHandler 配置 ，接收参数与
errorCaptured 一致 ，2.6 后可捕捉 v-on 与 promise 链的错误 ，可用于统一错误处理与错误兜底15 、Vue 组件里的定时器要怎么销毁？（必会）
如果页面上有很多定时器 ，可以在 data 选项中创建一个对象 timer ，给每个定时器取个名
字一一映射在对象 timer 中 ， 在 beforeDestroy 构造函数中 for(let k in
this.timer){clearInterval(k)}；
如果页面只有单个定时器 ，可以这么做
const timer = setInterval(() =>{}, 500);
this.$once(‘hook:beforeDestroy’, () => {
clearInterval(timer);
})16 、Vue-cli 用自定义的组件？有遇到过哪些问题吗？（必
会）
1 、在 components 目录新建你的组件文件（indexPage.vue） ，script 一定要 export default
{}
2 、在需要用的页面（组件）中导入：import indexPage from
‘@/components/indexPage.vue’3 、注入到 vue 的子组件的 components 属性上面,components:{indexPage}
4 、在 template 视图 view 中使用 ，例如有 indexPage 命名 ，使用的时候则 index-page17 、Vue 中 solt 的使用方式 ，以及 solt 作用域插槽的用法
（必会）
使用方式
当组件当做标签进行使用的时候 ，用 slot 可以用来接受组件标签包裹的内容 ，当给
solt 标签添加 name 属性的 时候 ，可以调换响应的位置
插槽作用域
作用域插槽其实就是带数据的插槽 ，父组件接收来自子组件的 slot 标签上通过 v-bind
绑定进而传递过来的数 据 ，父组件通过 scope 来进行接受子组件传递过来的数据18 、Vue 该如何实现组件缓存?（必会）
在面向组件化开发中 ，我们会把整个项目拆分为很多业务组件 ，然后按照合理的方式组
织起来 ，那么自然会存在组件之前切换的问题 ，vue 中有个动态组件的概念 ，它能够帮助开发
者更好的实现组件之间的切换 ，但是在面对需求频繁的变化 ，去要切换组件时 ，动态组件在切
换的过程中 ，组件的实例都是重新创建的 ，而我们需要保留组件的状态 ，为了解决这个问题 ，
需要使用到 vue 中内置组件
包裹动态组件时 ，会缓存不活动的组件实例,主要用于保留组
件状态或避免重新渲染 ，
简答的说: 比如有一个列表和一个详情 ，那么用户就会经常执行打开详情=>返回列表=>打
开详情…这样的话列表和详情都是一个频率很高的页面 ，那么就可以对列表组件使用进行缓存 ，这样用户每次返回列表的时候 ，都能从缓存中快速渲染 ，而不
是重新渲染19 、跟 keep-alive 有关的生命周期是哪些？（必会）
1 、前言：在开发 Vue 项目的时候 ，大部分组件是没必要多次渲染的 ，所以 Vue 提供了一
个内置组件 keep-alive 来缓存组件内部状态 ，避免重新渲染 ，在开发 Vue 项目的时候 ，大部分
组件是没必要多次渲染的 ，所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态 ，避
免重新渲染
2 、生命周期函数：在被 keep-alive 包含的组件/路由中 ，会多出两个生命周期的钩
子:activated 与 deactivated 。
2.1）activated 钩子：在在组件第一次渲染时会被调用 ，之后在每次缓存组件被激活
时调用 。
2.2）Activated 钩子调用时机： 第一次进入缓存路由/组件 ，在 mounted 后面 ，
beforeRouteEnter 守卫传给 next 的回调函数之前调用 ，并且给因为组件被缓存了 ，再次进入
缓存路由 、组件时 ，不会触发这些钩子函数 ，beforeCreate created beforeMount mounted 都
不会触发2.3）deactivated 钩子：组件被停用（离开路由）时调用：deactivated 钩子调用时
机：使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁) ，因为
组件没被销毁 ，被缓存起来了 ，这个钩子可以看作 beforeDestroy 的替代 ，如果你缓存了组
件 ，要在组件销毁的的时候做一些事情 ，可以放在这个钩子里 ，组件内的离开当前路由钩子
beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子 afterEach => deactivated
离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)20 、Vue 常用的修饰符都有哪些？（必会）
.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本
身而不是子元素的时候会触发；.capture: 事件侦听 ，事件发生的时候会调用21 、Vue 常用的指令都有哪些？并且说明其作用（必会）
1 、v-model 多用于表单元素实现双向数据绑定（同 angular 中的 ng-model）
2 、v-for 格式： v-for=“字段名 in(of) 数组 json ” 循环数组或 json(同 angular 中的 ng-
repeat),需要注意从 vue2 开始取消了$index
3 、v-show 显示内容 （同 angular 中的 ng-show）
4 、v-hide 隐藏内容（同 angular 中的 ng-hide）
5 、v-if 显示与隐藏 （dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false）v-
else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误
6 、v-bind 动态绑定 作用： 及时对页面的数据进行更改
7 、v-on:click 给标签绑定函数 ，可以缩写为@ ，例如绑定一个点击函数 函数必须写在
methods 里面
8 、v-text 解析文本
9 、v-html 解析 html 标签
10 、v-bind:class 三种绑定方法 1 、对象型 ‘{red:isred}’ 2 、三元型 ‘isred?“red ”:“blue ”’ 3 、
数组型 ‘[{red:“isred ”},{blue:“isblue ”}]’
11 、v-once 进入页面时 只渲染一次 不在进行渲染
12 、v-cloak 防止闪烁
13 、v-pre 把标签内部的元素原位输出22 、自定义指令(v-check 、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必会）
1 、全局定义指令：在 vue 对象的 directive 方法里面有两个参数 ，一个是指令名称 ，另外
一个是函数 。
2 、组件内定义指令：directives：钩子函数：bind(绑定事件触发) 、inserted(节点插入的时
候触发) 、update(组件内相关更新)钩子函数参数：el 、binding23 、指令 v-el 的作用是什么?（必会）
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器 ，
也可以是一个 HTMLElement 实例24 、v-show 和 v-if 指令的共同点和不同点?（必会）
1 、相同点：
v-show 和 v-if 都能控制元素的显示和隐藏 。
2 、不同点：
2.1）实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none ，控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
2.2）编译的区别
v-show 其实就是在控制 css
v-if 切换有一个局部编译/卸载的过程 ，切换过程中合适地销毁和重建内部的事件
监听和子组件
2.3）编译的条件
v-show 都会编译 ，初始值为 false ，只是将 display 设为 none ，但它也编译了
v-if 初始值为 false ，就不会编译了
2.4）性能比较
v-show 只编译一次 ，后面其实就是控制 css ，而 v-if 不停的销毁和创建 ，故 v-
show 性能更好一 。
3 、注意点：
因为 v-show 实际是操作 display:" "或者 none ，当 css 本身有 display：none 时 ，v-
show 无法让显示
4 、总结（适用场景）：
如果要频繁切换某节点时 ，使用 v-show（无论 true 或者 false 初始都会进行渲染 ，此
后通过 css 来控制显示隐藏 ，因此切换开销比较小 ，初始开销较大） ，如果不需要频繁切换某
节点时 ，使用 v-if（因为懒加载 ，初始为 false 时 ，不会渲染 ，但是因为它是通过添加和删除
dom 元素来控制显示和隐藏的 ，因此初始渲染开销较小 ，切换开销比较大）25 、为什么避免 v-if 和 v-for 用在一起（必会）
vue2.x 中v-for优先级高于v-if ，vue3.x 相反 。所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时 ，v-for 会优先作用 ，造成性能浪费；3.x 版本中 v-if 总是优先于 v-for 生效 ，导致v-if访问不了v-for中的变量 。
扩展;
一般我们在两种常见的情况下会倾向于这样做：为了过滤一个列表中的项目 (比如 v-for=“user in users ” v-if=“user.isActive ”) 。在这种情形下 ，请将 users 替换为一个计算属性 (比如 activeUsers) ，让其返回过滤后的列表 。
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users ” v-if=“shouldShowUsers ”) 。这种情形下 ，请将 v-if 移动至容器元素上 (比如 ul 、ol) 。
当 Vue 处理指令时 ，v-for 比 v-if 具有更高的优先级 ，所以这个模板：
<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li> </ul>将会经过如下运算：
this.users.map(function (user) { if (user.isActive) { return user.name } })因此哪怕我们只渲染出一小部分用户的元素 ，也得在每次重渲染的时候遍历整个列表 ，不论活跃用户是否发生了变化 。
通过将其更换为在如下的一个计算属性上遍历：
computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul>我们将会获得如下好处：
过滤后的列表只会在 users 数组发生相关变化时才被重新运算 ，过滤更高效 。
使用 v-for=“user in activeUsers ” 之后 ，我们在渲染的时候只遍历活跃用户 ，渲染更高效 。
解耦渲染层的逻辑 ，可维护性 (对逻辑的更改和扩展) 更强 。26 、watch 、methods 和 computed 的区别?（必会）
1 、基本说明
1.1)computed：
计算属性将被混入到 Vue 实例中,所有 getter 和 setter 的 this 上下文自动地绑
定为 Vue 实例
1.2)methods：
methods 将被混入到 Vue 实例中 。可以直接通过 VM 实例访问这些方法 ，或者
在指令表达式中使用 。方法中的 this 自动绑定为 Vue 实例 。
1.3)watch：
观察和响应 Vue 实例上的数据变动 ，一个对象 ，键是需要观察的表达式 ，值是对
应回调函数,值也可以是方法名 ，或者包含选项的对象 ，Vue 实例将会在实例化时调,$watch() ，
遍历 watch 对象的每一个属性
2 、三者的加载顺序
2.1)computed 是在 HTML DOM 加载后马上执行的 ，如赋值；（属性将被混入到 Vue 实
例）
2.2)methods 则必须要有一定的触发条件才能执行 ，如点击事件 ，watch 呢？它用于观
察 Vue 实例上的数据变动 ，
2.3）默认加载的时候
先 computed 再 watch ，不执行 methods；
2.4）触发某一事件后
先 computed 再 methods 再到 watch ，computed 属性 vs method 方 ，
computed 计算属性是基于它们的依赖进行缓存的
3 、总结
计算属性 computed 只有在它的相关依赖发生改变时才会重新求值 ，当有一个性能开
销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算 ，然后我们可能有其
他的计算属性依赖于 A ，这时候 ，我们就需要缓存 ，每次确实需要重新加载 ，不需要缓存时
用 methods27 、怎么在 watch 监听开始之后立即被调用？（必会）
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
28 、watch 怎么深度监听对象变化？（必会）
1 、有个原则监听谁,写谁的名字,然后是对应的执行函数, 第一个参数为最新的改变值,第二
个值为上一次改变的值, 注意: 除了监听 data,也可以监听计算属性 或者一个 函数的计算结果
2 、启用深度监听对象
watch:{
a:{
handler:function(val,oldval){},
deep:true
}
}29 、computed 中的属性名和 data 中的属性名可以相同吗？ （必会）
不能同名 ，因为不管是 computed 属性名还是 data 数据名还是 props 数据名都会被挂载在
vm 实例上 ，因此这三个都不能同名
if (key in vm.KaTeX parse error: Expected }, got EOF at end of input: …uted property "{key}" is already defined in data., vm) } else if (vm.$options.props && key in vm.$options.props) { warn(The computed property “${key} ” is already defined as a prop.`, vm)
}30 、什么是 Vue 的计算属性（必会）
在模板中放入太多的逻辑会让模板过重且难以维护 ，在需要对数据进行复杂处理 ，且可
能多次使用的情况下 ，尽量采取计算属性的方式 ，好处：使得数据处理结构清晰；
依赖于数据 ，数据更新 ，处理结果自动更新；
1 、计算属性内部 this 指向 vm 实例
2 、在 template 调用时 ，直接写计算属性名即可
3 、常用的是 getter 方法 ，获取数据 ，也可以使用 set 方法改变数据
4 、相较于 methods ，不管依赖的数据变不变 ，methods 都会重新计算 ，但是依赖数据不
变的时候 computed 从缓存中获取 ，不会重新计算31 、Vue 中 key 值的作用是什么？（必会）
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时 ，它默认用“就地复用 ”策略 。如果
数据项的顺序被改变 ，Vue 将不会移动 DOM 元素来匹配数据项的顺序 ， 而是简单复用此处
每个元素 ，并且确保它在特定索引下显示已被渲染过的每个元素 ，key 的作用主要是为了高效
的更新虚拟 DOM32 、Vue-loader 是什么？使用它的用途有哪些？（必会）
vue-loader 会解析文件 ，提取出每个语言块 ，如果有必要会通过其他 loader 处理 ，最后将
他们组装成一个 commonjs 模块；module.exports 出一个 vue.js 组件对象
1 、< temlate>语言块
1,1）默认语言：html
1,2）每个.vue 文件最多包含一个< template>块1,3）内容将被提取为字符串 ，将编译用作 VUE 组件的 template 选项
2 、< script>
2,1）默认语言：JS（在监测到 babel-loader 或者 buble-loader 配置时 ，自动支持
ES2015）
2,2）每个.vue 文件最多包含一个< script>块
2,3）该脚本在类 CommonJS 环境中执行（就像通过 webpack 打包的正常 JS 模块） 。所以
你可以 require()其他依赖 。在 ES2015 支持下 ，也可以使用 import 跟 export 语法
2,4）脚本必须导出 Vue.js 组件对象 ，也可以导出由 VUE.extend()创建的扩展对象；但是普
通对象是更好的选择
3 、< style>
默认语言：css
3,1）一个.vue 文件可以包含多个< style>标签
3,2）这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组件；具有不
同封装模式的多个< style>标签可以在同一个组件中混合使用
3,3）默认情况下 ，可以使用 style-loader 提取内容 ，并且通过< style>标签动态假如文档
的< head>中 ，也可以配置 webpack 将所有的 styles 提取到单个 CSS 文件中
4 、自定义块
可以在.vue 文件中添加额外的自定义块来实现项目的特殊需求；例如< docs>块；vue-
loader 将会使用标签名来查找对应的 webpack loaders 来应用到对应的模块上；webpack 需要
在 vue-loader 的选项 loaders 中指定
vue-loader 支持使用非默认语言 ，比如 CSS 预处理器 ，预编译的 HTML 模板语言 ，通过设置语
言块的 lang 属性：33 、Vue 中怎么自定义过滤器（必会）
Vue.js 允许自定义过滤器 ，可被用于一些常见的文本格式化 。过滤器可以用在两个地方：
双花括号插值和 v-bind 表达式 。过滤器应该被添加在 JavaScript 表达式的尾部 ，由“管道 ”符
号指示
可以用全局方法 Vue.filter() 注册一个自定义过滤器 ，它接收两个参数：过滤器 ID 和过滤
器函数 。过滤器函数以值为参数 ，返回转换后的值
Vue .filter( ‘reverse’ , function (value) { return value.split( ‘’ ).reverse().join( ‘’ ) })过滤器也同样接受全局注册和局部注册
34 、你是怎么认识 Vuex 的?（必会）
vuex 可以理解为一种开发模式或框架 。比如 PHP 有 thinkphp ，java 有 spring 等 ，通过状
态(数据源)集中管理驱动组件的变化(好比 spring 的 IOC 容器对 bean 进行集中管理)
1 、应用级的状态集中放在 store 中2 、改变状态的方式是提交 mutations ，这是个同步的事物
3 、异步逻辑应该封装在 action 中35 、Vuex 的 5 个核心属性是什么?（必会）
分别是 State 、 Getter 、Mutation 、Action 、 Module
1 、state
state 为单一状态树 ，在 state 中需要定义我们所需要管理的数组 、对象 、字符串等等 ，
只有在这里定义了 ，在 vue.js 的组件中才能获取你定义的这个对象的状态
2 、getter
getter 有点类似 vue.js 的计算属性 ，当我们需要从 store 的 state 中派生出一些状态 ，
那么我们就需要使用 getter ，getter 会接收 state 作为第一个参数 ，而且 getter 的返回值会
根据它的依赖被缓存起来 ，只有 getter 中的依赖值（state 中的某个需要派生状态的值）发
生改变的时候才会被重新计算
3 、mutation
更改 store 中 state 状态的唯一方法就是提交 mutation ，就很类似事件 。每个 mutation
都有一个字符串类型的事件类型和一个回调函数 ，我们需要改变 state 的值就要在回调函
数中改变 。我们要执行这个回调函数 ，那么我们需要执行一个相应的调用方法
store.commit
4 、action
action 可以提交 mutation ，在 action 中可以执行 store.commit ，而且 action 中可以有
任何的异步操作 。在页面中如果我们要嗲用这个 action ，则需要执行 store.dispatch
5 、module
module 其实只是解决了当 state 中很复杂臃肿的时候 ，module 可以将 store 分割成
模块 ，每个模块中拥有自己的 state 、mutation 、action 和 getter36 、Vuex 的出现解决了什么问题?（必会）
主要解决了以下两个问题
1 、多个组件依赖于同一状态时 ，对于多层嵌套的组件的传参将会非常繁琐 ，并且对于兄
弟组件间的状态传递无能为力
2 、来自不同组件的行为需要变更同一状态 。以往采用父子组件直接引用或者通过事件来
变更和同步状态的多份拷贝 。以上的这些模式非常脆弱 ，通常会导致无法维护的代码37 、简述 Vuex 的数据传递流程（必会）
当组件进行数据修改的时候我们需要调用 dispatch 来触发 actions 里面的方法 。actions 里
面的每个方法中都会 有一个
1 、commit 方法 ，当方法执行的时候会通过 commit 来触 mutations 里面的方法进行数据
的修改
2 、mutations 里面的每个函数都会有一个 state 参数 ，这样就可以在 mutations 里面进行
state 的数据修改 ，当数据修改完毕后 ，会传导给页面 ，页面的数据也会发生改变38 、Vuex 的 Mutation 和 Action 之间的区别是什么？（必
会）
1 、流程顺序
“相应视图—>修改 State ”拆分成两部分 ，视图触发 Action ，Action 再触发 Mutation
2 、角色定位
基于流程顺序 ，二者扮演不同的角色
1）Mutation：专注于修改 State ，理论上是修改 State 的唯一途径
2）Action：业务代码 、异步请求
3 、限制
1）角色不同 ，二者有不同的限制
2）Mutation：必须同步执行
3）Action：可以异步 ，但不能直接操作 State39 、Vue-router 是干什么的 ，原理是什么？（必会）
Vue-router 是 Vue.js 官方的路由插件 ，它和 vue.js 是深度集成的 ，适合用于构建单页
面应用 ，vue 的单页面应用是基于路由和组件的 ，路由用于设定访问路径 ，并将路径和组件映
射起来 ，传统的页面应用 ，是用一些超链接来实现页面切换和跳转的 ，在 vue-router 单页面应
用中 ，则是路径之间的切换 ，也就是组件的切换 ，路由模块的本质 就是建立起 url 和页面之间
的映射关系
“更新视图但不重新请求页面 ”是前端路由原理的核心之一 ，目前在浏览器环境中这一功
能的实现主要有两种方式：
1 、利用 URL 中的 hash（“# ”）
2 、利用 History interface 在 HTML5 中新增的方法40 、路由之间是怎么跳转的？有哪些方式？（必会）
1 、<router-link to="需要跳转到页面的路径"> 2 、this.$router.push()跳转到指定的 url ，并在 history 中添加记录 ，点击回退返回到上一个 页面 3 、this.$router.replace()跳转到指定的 url ，但是 history 中不会添加记录 ，点击回退到上上 个页面 4 、this.$touter.go(n)向前或者后跳转 n 个页面 ，n 可以是正数也可以是负数41 、Vue-router 怎么配置路由（必会）
在 vue 中配置路由分为 5 个步骤 ，分别是：
1 、安装
npm install --save vue-router
2 、引用
import VueRouter from ‘vue-router’
3 、配置路由文件
var router = new VueRouter({
routes:[
{
path:“/hello ”,
component:HelloWorld
},
{
path:“/wen ”,
component:HelloWen
new Vue({
el: ‘#app’,
components: { App },
router,
template: ‘’
})
4 、视图加载的位置
默认 App.vue 文件中加
5 、跳转导航
helloword（渲染出来的是 a 标签）42 、Vue-router 有哪几种路由守卫?（必会）
1 、路由守卫为
2 、全局守卫：beforeEach
3 、后置守卫：afterEach
4 、全局解析守卫：beforeResolve
5 、路由独享守卫：beforeEnter43 、Vue-router 的钩子函数都有哪些?（必会）
关于 vue-router 中的钩子函数主要分为 3 类
1 、全局钩子函数要包含 beforeEach
1,1）beforeEach 函数有三个参数,分别是
1,2）to:router 即将进入的路由对象
1,3）from:当前导航即将离开的路由
1,4）next:function,进行管道中的一个钩子 ，如果执行完了,则导航的状态就是
confirmed （确认的）否则为 false,终止导航2 、单独路由独享组件
2,1）beforeEnter
3 、组件内钩子
3,1）beforeRouterEnter
3,2）beforeRouterUpdate
3,3）beforeRouterLeave44 、路由传值的方式有哪几种(必会)
Vue-router 传参可以分为两大类 ，分别是编程式的导航 router.push 和声明式的导航
1 、router.push
1.1）字符串：直接传递路由地址 ，但是不能传递参数
this.r
o
u
t
e
r
.
p
u
s
h
(
"
h
o
m
e
"
)
对象：
1.2
）命名路由这种方式传递参数 ，目标页面刷新会报错
t
h
i
s
.
router.push("home") 对象： 1.2）命名路由 这种方式传递参数 ，目标页面刷新会报错 this.
router.push("home")对象：1.2）命名路由这种方式传递参数 ，目标页面刷新会报错this.router.push({name:“news ”,params:{userId:123})
1.3）查询参数 和 name 配对的式 params ，和 path 配对的是 query
this.KaTeX parse error: Expected }, got EOF at end of input: … 1.4）接收参数 this.route.query
2 、声明式导航
2.1）字符串
2.2）命名路由
2.3）查询参数45 、怎么定义 Vue-router 的动态路由?怎么获取传过来的动态参数?
我们经常需要把某种模式匹配到的所有路由 ，全都映射到同个组件 ，例如 ，我们有一个
User 组件 ，对于所有 ID 各不相同的用户 ，都要使用这个组件来渲染 ，那么 ，我们可以在
vue-router 的路由路径中使用“动态路径参数 ”(dynamic segment) 来达到这个效果
1 、动态路径参数 ，使用“冒号 ”开头 ，一个路径参数 ，使用冒号标记 ，当匹配到一个路
由时 ，参数会被设置到 this.r
o
u
t
e
r
.
p
a
r
a
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！