Vue 面试题 (全)_vue echarts面试题

vue用的什么web模板引擎?

jade模板，后来由于商标原因改成了pug
1

v-model的原理?

数据双向绑定的指令，同步控件输入值到data属性
更新data绑定属性,更新控件的值.
view层和model层数据交互
view层输入值影响data属性值，data属性值改变会更新view层
初始化vue实例会递归遍历data的每一个属性.
通过object.defineProperty来监听每一个属性的get，set方法,
一旦某个属性重新赋值，则能监听到变化来操作相应的页面控制
编译模板文件，为控件的v-model绑定input事件
1
2
3
4
5
6
7
8

computed和data中的数据能同名吗?

不可以,重名会导致初始化vm时计算属性绑定后覆盖掉data中的同名数据
1

data的数据和methods能同名吗?

不可以,vue会把methods和data的东西，代理到vue生成对象中,会覆盖
1

怎么给vue定义全局的方法?

1.通过prototype，这个非常方便
Vue.prototype[name]=method
Vue.prototype.name.=method
2.通过插件Vue.use(plugin)；
3.通过mixin，Vue.mixin(mixins);
1
2
3
4
5

解决vue2.0 v-html中使用过滤器

//全局方法（推荐）
Vue.prototype.msg = function（msg）{
	return msg.replace（"\n"，"
  "）
}
//computed方法
computed：{
  content：function(msg){
 	 return msg.replace("\n"，"
 ")
 }
}
//$options.filters(推荐)
filters：{
	msg：function(msg){
     return msg.replace(/\n/g，"
  ")
 }
}，  　　
data：{
  content：“XXXX”
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

解决vue打包后静态资源图片

静态资源存放位置放在src目录下
1

解决vue动态设置img的src不生效

动态添加src被当做静态资源处理了，加上require。
<img :src="require('../assets/images/xxx.png')" />
1
2

vue对搜索引擎做SEO优化

合适的HTML标签和属性
合理的HTTP状态码
Sitemap & robot.txt
合适的渲染方案
ssr 即单页面后台渲染
vue-meta-info与prerender-spa-plugin预渲染
nuxt.js
phantomjs
1
2
3
4
5
6
7
8

keep-alive有关的生命周期

 1.activated： 
 页面第一次进入，触发顺序created->mounted->activated
 2.deactivated:
 页面退出触发deactivated，当再次前进/后退的时候只触发activated
1
2
3
4

vue的优缺点

 构建数据驱动,通过API提供高效的数据绑定和灵活的组件。
 Vue的特性:轻量级的框架/双向数据绑定/指令/插件化
 优点：1. 简单：文档清晰
　　　 2. 快速：异步更新DOM。
　　　 3. 组合：用解耦的复用的组件应用程序。
　　　 4. 紧凑：~18kb min+gzip，无依赖。
　　　 5. 强大：表达式无需声明依赖的可推导属性
　　　 6. 模块：通过NPM、Bower或Duo 安装
　缺点:1.不支持IE8：
1
2
3
4
5
6
7
8
9

vue2.0兼容IE哪个版本

不支持ie8及以下，部分兼容IE9 ，完全兼容10以上
1

vue开发一个todo小应用的思路

结构: 输入部分( input )和输出部分( ul )
逻辑:用户输入之后,通过事件触发拿到用户输入的数据存起来,
将用户数据集合通过 v-for 渲染到页面上
当用户点击清单项,通过事件触发移出对应事件
1
2
3
4

vue推荐的风格指南

重要
1.vue组件名称推荐由多个单词构成
2.组件data数据推荐用函数return
3.props推荐更加详细的定义type/default/require
4.v-for推荐有配套的:key
5.v-for和v-if避免同在一起
6.vue组件样式推荐设置作用域
7.自定义的私有属性，推荐$_ + 命名空间作为前缀

一般
1.能用.vue写的组件，尽量不同vue.component
2.vue组件命名，用PascalCase或者短横线，风格保持统一。
3.基础组件命名，以Base前缀开头，以显示其通用性
4.单例组件命名，以The前缀开头，以显示其独特性
5.紧密耦合的组件命名。比如紧密耦合的父子组件，子组件以父组件名称为前缀
6.组件命名单词的顺序。先名词后形容词
7.自闭合组件的写法。如果有编译器的vue用自闭合写法，以显示没有传入属性
8.不同模板中vue命名大小写。如果有编译器的话PascalCase,否则用短横线命名
9.JS/JSX中始终用PascalCase组件命名
10.组件命名单词应该是完整的单词
11.props的命名方式，最自然的方法。JS里用驼峰命名，html里用短横线
12.vue组件有多个属性，分多行来写更加清晰易读
13.模板里复杂逻辑用计算属性或者method
14.复杂的计算属性或者method，拆分成多个
15.html模板的属性推荐用双引号的
16.指令缩写要么不写，要么都用缩写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

vue1.x和2.x的区别

作用域区别
	1.x 随意的定义作用域
	2.x 不允许body 或者html 元素
json
	1.x json 如果想显示 那么就得使用过滤器 json
	2.x 不用过滤器了 直接可以看
	1.x 显示 {{msg | json}}
	2.x 显示 {{ msg}} 便可直接显示对象
生命周期
	1.x 
	created 实例已经创建
	beforeCompile 在编程之前
	compiled 编程之后
	ready 实例已经插入到文档之中
	beforeDetroy 在销毁之前
	destroyed 销毁之后
	2.x
	beforeCreate 刚刚创建这个实例 属性还没有绑定
	created 创建完毕 属性已经绑定好了
	beforeMount 模版在渲染之前
	mounted //ready 渲染之后
	beforeUpdate //数据更新之前
	updated //数据更新之后
	beforeDestroy 实例化销毁之前
	destroyed 实例化销毁之后
过滤器
	2.x取消了所有的默认的过滤器 封装的方式没有区别
	1.x 传参 uppercase "1" "2"
	2.x uppercase('1','2')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

vue中key的原理

是给每一个vnode的唯一id,
是diff的一种优化策略,
可以根据key更准确更快找到对应的vnode节点

不用key，Vue会采用就地复地原则：最小化element的移动,
并且会尝试尽最大程度在同适当的地方对相同类型的element,
做patch或者reuse。

使用key，Vue会根据keys的顺序记录element,
曾经拥有了key的element不再出现的话，会被直接remove/destoryed
当拥有新值的render作为key时，拥有了新key的Comp出现了,
那么旧key Comp会被移除，新key Comp触发渲染
1
2
3
4
5
6
7
8
9
10
11
12

vue中重置data

this.$data获取当前的data
this.$options.data获取组件初始状态的data.
Object.assign(this.$data, this.$options.data()),重置data。
重置某个属性：this.form = this.$options.data().form
1
2
3
4

vue渲染时保留模板中的HTML注释

<template comments>
  ...
</template>
1
2
3

Vue.observable是什么

Vue.observable是vue2.6版本新增的，可以实现简单的跨组件数据状态共享
1

const state = Vue.observable({count:0})
const demo = {
	 render(h){
	 	return h ({'button',{
	 		on:{click:()=>{state.count++})
	 	},count is :$(state.count})
	 }
}
1
2
3
4
5
6
7
8

style加scoped属性的用途和原理

防止全局同名CSS污染,
在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]
1
2

vue3.0新功能

一.性能快
diff算法的优化/render阶段的静态提升/事件侦听缓存

二.按需编译，体积比更小（Tree shaking）
import { computed, watch, nextTick } from "vue";
ES6 模块系统import/export

三.Compostion组合API

四.更好的TS支持

五.自定义渲染API

六.更先进的组件
1.Fragment组件:Fragment节点是虚拟的，不会DOM树中呈现
// vue2是不允许这样写的，组件必须有一个跟节点，现在vue将为我们创建一个虚拟的Fragment节点。
<template>
  <div>Hello</div>
  <div>World</div>
</template>
2.Suspense组件:在Suspended-component完全渲染之前，备用内容会被显示出来。如果是异步组件,
Suspense可以等待组件被下载，或者在设置函数中执行一些异步操作。
<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>
七.更快的vite开发构建工具

八.proxy实现数据监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

vue边界情况

访问根实例、访问父组件、子组件
1

子组件中访问父组件的实例

1：直接在子组件中通过this.$parent.event来调用父组件的方法
2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法
1
2
3

watch的属性用箭头函数定义的结果

因为箭头函数默绑定父级作用域的上下文，所以不会绑定vue实例，所以this是undefined
1

methods的方法用箭头函数定义的结果

因为箭头函数默绑定父级作用域的上下文，所以不会绑定vue实例，所以this是undefined
1

babel-polyfill模块用途

babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill去模拟这些新特性。
1

vue的错误处理

1.errorCaptured是组件内部钩子，可捕捉本组件与子孙组件抛出的错误，接收error、vm、info三个参数，return false后可以阻止错误继续向上抛出。
2.errorHandler为全局钩子，使用Vue.config.errorHandler配置，接收参数与errorCaptured一致，2.6后可捕捉v-on与promise链的错误，可用于统一错误处理与错误兜底。
1
2

Vue.config.errorHandler = function (err, vm, info) {}
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
1
2
3
4

事件中传入$event,e.target和e.currentTarget的区别？

event.currentTarget始终指向事件所绑定的元素,event.target指向事件发生时的元素
1

vue文件中style和script的必要性

都不是必须的,如果是普通组件那么是一个静态html
如果是函数式组件,那么可以直接使用props等函数式组件属性
1
2

vue怎么实现强制刷新组件？

1.Vue.$set(object, key, value)
2.this.$forceupdate();
3.<components :key=XXX>
1
2
3

vue自定义事件中父组件接收子组件的多个参数

this.$emit("eventName",data)data为一个对象
子组件传递多个参数，父组件用展开运算符获取
1
2

实际工作中的vue最佳实践

1. 项目目录结构简介
├── public // index.html
├── src // 业务相关
│ ├── assets // 静态文件(css, images)
│ ├── components // 全局组件
│ ├── layouts // 基础样式布局
│ ├── plugin // 样式及工具引入
│ ├── request // 请求配置
│ ├── router // 路由
│ ├── store // 全局状态管理
│ ├── utils // 工具文件
│ ├── app.vue // 入口文件
│ ├── main.js // 主要配置文件
│ └── views // 页面
├── .eslintrc.js // eslint 检查配置
├── .env.release // 测试环境变量
├── .env.pre-build // 预发环境变量

2.UI 框架选择
element，iview，ant-design-vue

3.main.js 分散处理
main.js 作为操作入口，很多东西需要引入，代码体积过大，需要进行优化，逻辑清晰

4.axios 请求二次封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

解决vue给组件绑定自定义事件无效

组件外部加修饰符.navtive
组件内部声明$emit('自定义事件')
1
2

vue的属性名称与method的方法名称一样时的问题

vue会把methods和data的东西，全部代理到vue生成对象中。
会产生覆盖所以最好不要同名
键名优先级：props > data > methods
1
2
3

访问vue变量名如果以_、$开头的属性的值？

报错 变量未定义
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。
你可以使用例如 $data.xxx或者_data.xxx 的方式访问这些属性。
1
2
3

vue使用v-for遍历对象时，是按什么顺序遍历的？

1、会先判断是否有iterator接口，如果有循环执行next()方法
2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致
3、保证对象的输出顺序可以把对象放在数组中，作为数组的元素
1
2
3

vue如果想扩展某个现有的组件时，怎么做呢？

使用Vue.extend直接扩展
使用Vue.mixin全局混入
HOC封装
1
2
3

说下attrs和attrs和listeners的使用场景

组件传值的时候会用到 爷爷在父亲组件传递值，父亲组件会通过$attrs获取到不在父亲props里面的所有属性,
父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法
1
2

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,
这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件.
通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
1
2
3
4

vue项目本地开发完成后部署到服务器后报404是什么原因呢？

1.检查nginx配置，是否正确设置了资源映射条件；
2.检查vue.config.js中是否配置了publicPath，若有则检查是否和项目资源文件在服务器摆放位置一致。
1
2

v-once的使用场景有哪些？

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
1

说说你对vue的表单修饰符.lazy的理解?

input标签v-model用lazy修饰之后，vue并不会立即监听input Value的改变，会在input失去焦点之后，才会触发Value的改变
1

vue为什么要求组件模板只能有一个根元素？

从效率上，如果多个根，那么就会产生多个入口（遍历、查找）从效率上来说都不方便
其次，如果一颗树有多个根，其实是可以优化的。肯定存在一个子节点。通过这个该子节点访问到所有的节点。那么，优化后,
这个子节点就成为了新的树的根节点 ,此外从vue的角度来说，如果一个组件有多个根，说明你可以把这个组件拆开成两个组件,
这样既进行了解耦，也会为后续的维护和迭代提供方便
1
2
3
4

EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

建议在created里注册，在beforeDestory移出
在组件内的beforeRouteLeave中移除事件监听
1
2

怎么修改vue打包后生成文件路径？

webpack：output.path vue-cli3: outputDir
1

说说vue与app交互的方法?

window.onload
onload 事件会在页面或图像加载完成后立即发生。mounted钩子里添加代码window.οnlοad=function(){//调用交互}，在window加载完成以后触发交互，而且此时间节点在vue的生命周期是不存在的，也是在mounted、created钩子后发生的，这个原生的方法还是很有用的
1
2

使用vue写一个tab切换?

v-if 配合data+watch监听实现
1

vue中什么是递归组件？

tree,多级导航组件
1

怎么访问到子组件的实例或者子元素？

this.$refs.XXX
1

在子组件中怎么访问到父组件的实例？

1：直接在子组件中通过this.$parent.event来调用父组件的方法
2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法
1
2
3

在组件中怎么访问到根实例？

通过this.$root
1

说说你对Object.defineProperty的理解?

Object.defineProperty定义新属性或修改原有的属性；
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法,
通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理。
1
2
3

原生addEventListeners监听事件，要手动去销毁吗？为什么？

“需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏”
1

vue组件里的定时器要怎么销毁？

beforeDestroy
1

vue组件会在什么时候下被销毁？

页面关闭、路由跳转、v-if和改变key值
1

使用vue渲染大量数据时应该怎么优化？
1.如果需要响应式，考虑使用虚表（只渲染要显示的数据）；
2.如果不考虑响应式，变量在beforeCreated或created中声明（Object.freeze会导致列表无法增加数据）

Object.freeze
可以冻结一个对象(注意它不并是 vue 特有的 api)。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性,
并使用 Object.defineProperty 把这些属性全部转为 getter/setter，它们让 Vue 能进行追踪依赖
在属性被访问和修改时通知变化。使用了 Object.freeze 之后，不仅可以减少 observer 的开销,
还能减少不少内存开销。 使用方式：this.item = Object.freeze(Object.assign({}, this.item))
1
2
3
4
5
6

在vue中使用this应该注意哪些问题？

vue中使用匿名函数，会出现this指针改变。
1.使用箭头函数
2.定义变量绑定this至vue对象
1
2
3

你有使用过JSX吗？

jsx不是一门新的语言，是一种新的语法糖。让我们在js中可以编写像html一样的代码。
 允许XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面
1
2

说说组件的命名规范?

定义组件名有两种方式：
1.kebab-case（短横线分隔命名），引用时必须也采用kebab-case；
2.PascalCase（首字母大写命名），引用时既可以采用PascalCase也可以使用kebab-case；
但在DOM中使用只有kebab-case是有效的
1
2
3
4

怎么配置使vue2.0+支持TypeScript写法？

配置ts-loader，tsconfig
增加类型扩展，让ts识别vue文件
vue文件中script里面换成ts写法， 需要增加几个ts扩展的package， 比如vue-property-decorator
1
2
3

template有什么用？

包裹嵌套其它元素，使元素具有区域性，自身具有三个特点：
*隐藏性：不会显示在页面中
*任意性：可以写在页面的任意地方
*无效性： 没有一个根元素包裹，任何HTML内容都是无效的
1
2
3
4

vue的is这个特性你有用过吗？主要用在哪些方面？

 vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题
 <ul>
  <li is='my-component'></li>
</ul>
1
2
3
4

vue的:class和:style有几种表示方式？

:class 绑定变量 绑定对象 绑定一个数组 绑定三元表达式 :style 绑定变量 绑定对象 绑定函数返回值 绑定三元表达式 
1

你了解什么是函数式组件吗？

函数式组件：
需要提供一个render方法， 接受一个参数（createElement函数）， 方法内根据业务逻辑,
通过createElement创建vnodes，最后return vnodes
createElement函数， 三个参数， 第一个参数是html标签或自定义组件,
第二个参数一个obj（包含props， on...等等）， 第三个参数children(通过createElement构建， 或者字符串)
1
2
3
4
5

vue怎么改变插入模板的分隔符？

要做实例中增加delimiters 2.0后只能在实例中修改了，1.0还可以全局修改
new Vue({ delimiters: ['${', '}'] })// 分隔符变成了 ES6 模板字符串的风格
1
2

组件中写name选项有什么作用？

项目使用keep-alive时，可搭配组件name进行缓存过滤
DOM做递归组件时需要调用自身name
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的
1
2
3

说说你对provide和inject的理解?

通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,
主要是为了解决一些循环组件比如tree, menu, list等, 传参困难, 并且难以管理的问题,
主要用于组件封装, 常见于一些ui组件库
1
2
3

开发过程中有使用过devtools吗？

有，devtools确实是个好东西，大力协助vue项目开发，传参，数据展示，用于调试vue应用,
这可以极大地提高我们的调试效率
1
2

说说你对slot的理解有多少？slot使用场景有哪些？

slot, 插槽, 在使用组件的时候, 在组建内部插入东西. 组件封装的时候最常使用到
1

你有使用过动态组件吗？说说你对它的理解?

通过 Vue 的 元素加一个特殊的 is 特性来实现
1

prop验证的type类型有哪几种？

props:{
	title:String,
	likes: Number,
	isPublished: Boolean,
	commentIds: Array,
	author: Object,
	callback: Function,
	contactsPromise: Promise
}
1
2
3
4
5
6
7
8
9

prop是怎么做验证的？可以设置默认值吗？

单个类型就用Number等基础类型，多个类型用数组，必填的话设置require为true,
默认值的话设置default，对象和数组设置默认用工厂函数，自定义验证函数validator。
1
2

怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？

可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等
1

说说你对vue组件的设计原则的理解?

第一: 容错处理, 这个要做好, 极端场景要考虑到
第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值
第三: 颗粒化, 把组件拆分出来.
第四: 一切皆可配置, 如有必要, 组件里面使用中文标点符号, 还是英文的标点符号, 都要考虑到
第五: 场景化, 如一个dialog弹出, 还需要根据不同的状态封装成success, waring, 等
第六: 有详细的文档/注释和变更历史, 能查到来龙去脉, 新版本加了什么功能是因为什么
第七: 组件名称, 参数prop, emit, 名称设计要通俗易懂, 最好能做到代码即注释这种程度
第八: 可拓展性, 前期可能不需要这个功能, 但是后期可能会用上, 要预留什么, 要注意什么
第九: 规范化
第十: 分阶段: 不是什么都要一期开发完成看具体业务
1
2
3
4
5
6
7
8
9
10

vue的diff算法是什么？

“diff就是比较两个树,render会生成两颗树,一个新树 newVnode,一棵旧树oleVnode,
然后两棵树进行对比更新差异就是 diff ,全称是 difference, 在 vue 里面,
diff 算法就是通过 patch 函数来完成的,所有有的时候也叫 patch 算法。”
1
2
3

** vue如何优化首页的加载速度？**

异步路由和异步加载
还有分屏加载, 按需加载, 延时加载图片等, cdn,ssr直出，域名拆分,
webpack压缩HTML/CSS/JS，
首屏css单独提取内联，关键资源Proload，
图片：不缩放，使用webp、小图片base64，iconfont，
gzip,dns-prefetch，静态资源单独域名，去掉cookie
1
2
3
4
5
6

** vue打包成最终的文件有哪些？**

vendor.js, app.js, app.css,
1.xxx.js
2.xxx.js

如果有设置到单独提取css的话
还有
1.xxx.css
1
2
3
4
5
6
7

…
** ajax、fetch、axios这三都有什么区别？**

ajax, 实际上就是xmlHttpRequest, 旧瓶装新酒的一种新应用的称呼
fetch是新出的规范, 具体实现原理不太清楚, 但是内部返回的是一个Promise
axios是基于ajax的再次封装返回的也是Promise
1
2
3

** vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？**

push() pop() shift() unshift() splice() sort() reverse() 对中转的数据都做了监听
1

vue中是如何使用event对象的？

@click=“func” 默认第一个参数传入event对象
@click="func(0, $event)" 如果自己需要传入参数和event对象，则需要使用$event来获取event对象并传入func
1
2

vue首页白屏是什么问题引起的？如何解决呢？

1.打包后文件引用路径不对，导致找不到文件报错白屏
2.路由模式mode设置影响
1
2

说说你对单向数据流和双向数据流的理解?

单向数据流：所有状态的改变可记录、可跟踪，源头易追溯；所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性；一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)；如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
双向数据流：无论数据改变，或是用户操作，都能带来互相的变动，自动更新
1
2

移动端ui你用的是哪个ui库？

vant，mint等等吧，大部分都是可以查到解决方案
1

你知道nextTick的原理吗？

nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
   //操作
})
1
2
3
4

说说你对v-clock和v-pre指令的理解?

v-cloak指令只是在标签中加入v-cloak自定义属性，在HTML还编译完成之后该属性会被删除。
v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。
1
2

写出你知道的表单修饰符和事件修饰符?

事件修饰符.stop .prevent .capture .self .once .passive
表单修饰符.number .lazy .trim
1
2

说说你对proxy的理解?

vue的数据劫持有两个缺点:
1、无法监听通过索引修改数组的值的变化
2、无法监听object也就是对象的值的变化 所以vue2.x中才会有$set属性的存在
proxy是es6中推出的新api，可以弥补以上两个缺点，所以vue3版本用proxy替换object.defineproperty
1
2
3
4

用vue怎么实现一个换肤的功能？

全局的theme属性然后做class判断或者加载不同的样式文件。一种是编译时换肤 一种是用户操作换肤.
编译时换肤可以通过css in js相关技术修改css预处理器的变量 。用户操作换肤 只能内置一些style变量供用户选择
1
2

有在vue中使用过echarts吗？
npm install echarts vue-echarts

main.js
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
mounted() {
    this.orgOptions = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            smooth: true
        }]
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

vue性能的优化的方法有哪些？

v-if 和 v-show 区分使用场景
computed 和 watch 的使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化 可以通过 Object.freeze 方法来冻结一个对象
事件的销毁 addEventListener 
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能 可以参考 vue-virtual-scroll-list vue-virtual-scroller 优化
服务端渲染 SSR or 预渲染
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
模板预编译
提取公共代码
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
开启 gzip 压缩
浏览器缓存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

https://blog.csdn.net/weixin_43392489/article/details/114178963
SSR解决了什么问题？

 server side render服务端渲染解决spa应用首屏加载速度慢、不利于SEO问题
1

说说你觉得认为的vue开发规范有哪些？

https://cn.vuejs.org/v2/style-guide/
1

vue部署上线前需要做哪些准备工作？

router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn
1

vue过渡动画实现的方式有哪些？

1.使用vue的transition标签结合css样式完成动画
2.利用animate.css结合transition实现动画
3.利用 vue中的钩子函数实现动画
1
2
3

created和mounted中请求数据的区别？

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后,
再对html的dom节点进行一些需要的操作。
1
2
3

vue父子组件双向绑定的方法有哪些？

1.利用对象的引用关系来实现
2.父子组件之间的数据传递
3.使用.sync修饰符
1
2
3

vue怎么获取DOM节点？

1、document.getElementById
2、引入jquery
3、标签的属性加上ref="name"，通过this.$refs.name来获取这个元素节点
1
2
3

vue项目有使用过npm run build --report吗？

给process.env对象添加了一个属性 npm_config_report: "true",
表示开启编译完成后的报告。
1
2

如何解决vue打包vendor过大的问题？

1、在webpack.base.conf.js新增externals配置，表示不需要打包的文件,
然后在index.html中通过CDN引入
externals: {
    "vue": "Vue",
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "element-ui": "ELEMENT",
    "BMap": "BMap"
  }
2、使用路由懒加载
1
2
3
4
5
6
7
8
9
10

webpack打包vue速度太慢怎么办？

webpack支持监听模式，此时需要重新编译时就可以进行增量构建
增量构建是很快的，基本不到一秒或几秒之内就能重新编译好,
注意区分一下开发环境和线上环境，开发环境启用热更新替换,升级webpack4,支持多进程
1
2
3

开发过程中要同时跟不同的后端人员联调接口该怎么办？

devServer中把所有的服务人员的地址代理都写进去，
然后动态更改接口的baseUrl，这样切换不同后端人员的时候不用重启
1
2

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

// 可以通过指令去做
Vue.directive('hasPermission', {
  bind(el, binding, vnode) {
	const permissions = vnode.context.$store.state.account.permissions
	if (binding.value === '') return
	const value = binding.value.split(',')
	let flag = true
	for (const v of value) {
		if (!permissions.includes(v)) {
			flag = false
		}
	}
	if (!flag) {
		if (!el.parentNode) {
			el.style.display = 'none'
		} else {
		el.parentNode.removeChild(el)
		}
	}
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

vue和微信小程序写法上有什么区别？

onLoad: 页面加载,只会调用一次，可以获取当前页面所调用的 query 参数。
onShow: 页面显示,每次打开页面都会调用一次。
onReady: 页面初次渲染完成,只会调用一次，可以和视图层进行交互。
onHide: 页面隐藏
onUnload: 页面卸载
数据请求:在onLoad或者onShow中请求数据。
绑定某个变量的值为元素属性用两个大括号括起来，不加被认为是字符串。
循环wx:for
wx-if和hidden控制元素的显示和隐藏
全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件
1
2
3
4
5
6
7
8
9
10

你了解什么是高阶组件吗？举个例子说明下？

高阶组件(HOC)应该是无副作用的纯函数，且不修改原组件
高阶组件(HOC)不关心你传递的数据，并且新生成组件不关心数据来源
高阶组件(HOC)接收到的 props 应该透传给被包装组件
高阶组件完全可以添加、删除、修改 props
1
2
3
4

为什么写组件的时候写在.vue里？可以是别的文件名后缀吗？

也可以写为js,jsx,ts,tsx这种
1

vue-loader是什么？它有什么作用？

解析和转换.vue。提取出其中的逻辑代码 script,样式代码style,
以及HTML 模板template，再分别把他们交给对应的loader去处理。
1
2

说说你对vue的extend的理解，它主要是用来做什么的？

继承当前的Vue类，传入一个extendOption生成一个新的构造函数.
在extend的时候会进行mergeOption，融合Vue原型上的baseOption,
所以extend出来的子类也能使用v-model、keep-alive等全局性的组件。
作用是生成组件类。在挂载全局组件和设置了components属性的时候会使用到.
在生成DOM的时候会new 实例化挂载。
1
2
3
4
5

如果将axios异步请求同步化处理？

async await 
1

为什么vue使用异步更新组件？

批量更新 收集当前的改动一次性更新 节省diff开销
1

你有使用过render函数吗？有什么好处？

template也会翻译成render，只有一点，template中元素的tag_name是静态的,
不可变化，使用createEelment可以生成不同tag_name
1
2

组件进来请求接口时你是放在哪个生命周期？

一般在created 因为在这个生命周期我们常用到的都已经初始化了,
如果涉及dom 那就mounted
1
2

为何官方推荐使用axios而不用vue-resource？

1.vue-resources不再更新了，vue作者尤大推荐axios。
2.axios更加强大
3.axios就是一个基于ES6的Promise的网络请求库
4.axios在浏览器里建立XHR,通过nodejs进行http请求,
转换或者拦截请求数据或响应数据,支持Promise的API,
可以取消请求,自动转换JSON,可以防御XSRF攻击
5.vue-resources只提供了浏览器版本
1
2
3
4
5
6
7

如何中断axios的请求？
axios是什么？怎样使用它？怎么解决跨域的问题？

axio 的是一种异步请求，可以在请求头中添加Access-Control-Allow-Origin,
也可以在index.js文件中更改proxyTable配置等解决跨域问题,
因为axios在vue中利用中间件http-proxy-middleware做了一个本地的代理服务A,
相当于浏览器通过本地的代理服务A请求了服务端B，浏览器通过服务A并没有跨域,
因此就绕过了浏览器的同源策略，解决了跨域的问题。
1
2
3
4
5

说说你对vue的mixin的理解，有什么应用场景？

mixins 就是混入。
一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。
//暴露两个mixins对象
export const mixinsTest1 = {
    methods: {   
    },
    created() {
    },
}
<script>
import {mixinsTest1} from '../util/test.js'
export default {
  name: "Home",
  data () {
    return {
    };
  },
  created(){
      console.log("1212");
  },
  mixins:[mixinsTest1] // 先调用哪个mixins对象，就先执行哪个
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

删除数组用delete和Vue.delete有什么区别？

delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变
Vue.delete：直接删了数组成员，并改变了数组的键值（避开 Vue 不能检测到属性被删除的限制）
1
2

动态给vue的data添加一个新的属性时会发生什么？怎样解决？

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如果想要使添加的值做到响应式，应当使用$set()来添加对象。
1

vue实例挂载的过程是什么？

render, 没有则去编译编译vdom,对实例进行watch
1

vue有哪些场景是监听不到的？无法监听时怎么解决？

无法监听时的方案：
数组：改变数组的值：this.$set()
改变数组长度：arr.splice()
对象：改变原有属性：Object.assign()
增加新属性：this.$set()
1
2
3
4
5

为什么data属性必须声明为返回一个初始数据对应的函数呢？

当重用组件时，由于数据对象都指向同一个data对象，当修改data时，其他组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象，引用地址不同，则不会出现这个问题。
1

怎么在watch监听开始之后立即被调用？

 设置immediate属性为true
1

watch怎么深度监听对象变化？

设置deep属性为true
1

watch和计算属性有什么区别？

一个是侦听属性，一个是计算属性
一个是为了应对复杂的逻辑计算，一个是对数据的变化作出反应
一个是只有当缓存改变时才执行，一个是只要从新渲染就会执行
一个有缓存，一个没有缓存
1
2
3
4

vue如何监听键盘事件？

@keyup.键名.native
1

说说你对MVC、MVP、MVVM模式的理解?

MVVM用视图模型代替了MVP中的展示器，视图模型和视图实现了双向绑定，
当视图发生变化的时候视图模型也会发生改变，当视图模型变化的时候视图也随之变化。

MVP用展示器代替了控制器，而展示器是可以直接更新视图，
所以MVP中展示器可以处理视图的请求并递送到模型又可以根据模型的变化更新视图，
实现了视图和模型的完全分离。
1
2
3
4
5
6

什么是双向绑定？原理是什么？

双向数据绑定就是存在data→view,view→data两条数据流的模式。
目前双向数据绑定都是基于Object.defineProperty()
重新定义get和set方法实现的。修改触发set方法赋值，获取触发get方法取值，
并通过数据劫持发布信息.
1
2
3
4

vue-router怎么重定向页面？
路由中配置redirect属性

export default { 
	path: '', 
	name: '', 
	meta: { 
		//元信息 icon: '', 
		//路由图标 title: '', 
		//路由名称 light: '', 
		//高亮显示那个路由name show: true, //是否显示 
	}, 
	redirect: {
		name: '', //重定向，指向哪个路由的name
	 },
	component: '', //当前路由时要显示的组件 children: [], //嵌套子路由
 } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

vue-router怎么配置404页面？

export default { path: '*', name: '404', component: '组件404', } 
需注意：将改路由配置放到所有路由的配置信息的最后，否则会其他路由path匹配造成影响。
1
2

切换路由时，需要保存草稿的功能，怎么实现呢？

用keep-alive缓存那个路由
1

vue-router路由有几种模式？说说它们的区别？
共有两种模式

hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新 
history: 使用html5的history方法, 不支持老旧浏览器, 但是如果要部署到服务器的化,
需要在ng上进行相应的正向代理跳转, 否则拷贝的链接会打不开
1
2
3

vue-router有哪几种导航钩子（ 导航守卫 ）？

共有三种守卫：
1:全局守卫：beforeEach,afterEach
2:路由独享守卫：beforeEnter
3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
他们执行顺序：全局》路由》组件
除了afterEach全局后置外，其他的守卫中务必要调用next(),否则无法完成导航
还有注意全局前置守卫可以用来进行拦截，（登录拦截）
1
2
3
4
5
6
7

说说你对router-link的了解

to
表示目标路由的链接,内部会立刻把 to 的值传到 router.push()，
这个值可以是字符串或者是描述位置的对象。

replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

append
设置后，则在当前(相对)路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

tag
有时候想要渲染成某种标签

active-class
设置链接激活时使用的 CSS 类名。可以通过以下代码来替代

exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代

event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

vue-router如何响应路由参数的变化？

切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。 不同路由渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用
1

切换到新路由，页面要滚动到顶部或保持原先的滚动位置？

通过router 的meta来记录需要保存滚动条的位置,在new VueRouter()时调用scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 }}的方法
1

在什么场景下会用到嵌套路由？

顶部栏和左侧菜单栏是全局通用的，那就应该放在父路由，
而右下的页面内容部分放在子路由
1
2

如何获取路由传过来的参数？

query方式传入的参数使用this.$route.query接收 
params方式传入的参数使用this.$router.params接收
1
2

说说active-class是哪个组件的属性？

active-class是vue-router模块的router-link组件中的属性，
用来做选中样式的切换首页
1
2

在vue组件中怎么获取到当前的路由信息？

this.$route.path
1

vur-router怎么重定向？

const routes = [{ path: '/home', redirect: '/' }]
1

怎样动态加载路由？

vue-router的addRoutes方法
1

怎么实现路由懒加载呢？

// vue异步组件
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
}

// es6提案的import()
import(/* ChunkName: 'ImportFuncDemo' */ '@/components/home')

// webpack的require,ensure()
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果让你从零开始写一个vue路由，说说思路

1.为了方便后期维护，建议独立出一个 router.js 文件 
2.npm install vue-router 
3.引入注册 import Router from 'vue-router'; Vue.user(Router); 
4.向外暴露出一个router实例 
export default new Router({ mode: '', path: '', name: '', ... }); 
1
2
3
4
5

说说vue-router完整的导航解析流程是什么？

1.导航被触发 
2.在失活的组件里调用beforeRouteLeave守卫 
3.调用全局beforeEach守卫
4.在复用组件里调用beforeRouteUpdate守卫
5.调用路由配置里的beforeEnter守卫
6.解析异步路由组件
7.在被激活的组件里调用beforeRouteEnter守卫
8.调用全局beforeResolve守卫
9.导航被确认
10.调用全局的afterEach钩子
11.DOM更新
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
1
2
3
4
5
6
7
8
9
10
11
12

路由之间是怎么跳转的？有哪些方式？

1.在页面使用来定义导航链接 
2.使用编程式导航，push，replace，go 
1
2

如果vue-router使用history模式，部署时要注意什么？

服务器的404页面需要重定向到index.html
1

route和router有什么区别？

route：代表当前路由信息对象，可以获取到当前路由的信息参数 
router：代表路由实例的对象，包含了路由的跳转方法，钩子函数等
1
2

vue-router钩子函数有哪些？都有哪些参数？

全局的：beforeEach、beforeResolve、afterEach 
路由的：beforeEnter 组件的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 
参数：to、from、next；正对不同的钩子函数参数有所差异。
1
2
3

vue-router是用来做什么的？它有哪些组件？

vue-router路由，通俗来讲主要是来实现页面的跳转，
通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。
1
2

你有使用过vuex的module吗？主要是在什么场景下使用？

把状态全部集中在状态树上，非常难以维护。
按模块分成多个module，状态树延伸多个分支，模块的状态内聚，
主枝干放全局共享状态
1
2
3

vuex中actions和mutations有什么区别？

mutations可以直接修改state，包含同步操作，通过提交commit调用
(通过Action或mapMutation调用而非通过this.$store.commit()提交) 
actions是用来触发mutations的，它无法直接改变state，包含异步操作，
通过store.dispatch触发
1
2
3
4

vuex使用actions时不支持多参数传递怎么办？

以载荷或对象形式
1

vuex怎么知道state是通过mutation修改还是外部直接修改的？

通过$watch监听mutation的commit函数中_committing是否为true
1

请求数据是写在组件的methods中还是在vuex的action中？

根据业务场景划分，如果该请求数据的方法是多个视图共享的话，
则写在action中，如果是当前视图所用，则写在组件的methods中
1
2

怎么监听vuex数据的变化？

官网的图显示 Devtools好像是监视mutation的调用 mark一下
1

vuex的action和mutation的特性是什么？有什么区别？

action：通过执行commit()来触发mutation间接更新state ，组件中通过$store.dispatch('名称') 触发action，可以包含(定时器, ajax) 
mutation是一个对象包含多个直接更新state的方法(回调函数)，
只能包含同步的代码, 不能写异步代码
1
2
3

页面刷新后vuex的state数据丢失怎么解决？

localStorage/SessionStorage
1

vuex的store有几个属性值？分别讲讲它们的作用是什么？

state:存贮公共数据的地方 
getters：获取公共数据的地方 
mutations：放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行 
action：放的是异步的操作 通过dispatch的方法让action里面的方法执行 context是
1
2
3
4

你理解的vuex是什么呢？哪些场景会用到？

Vuex就是一个仓库，store仓库里面放了很多对象,储存数据,方法
1

使用vuex的优势是什么？

全局存储状态和全局方法
1

ElementUI是怎么做表单验证的？

rules方法,props对应表单的字段
1

ElementUI怎么修改组件的默认样式？

/deep/  !important 删除scoped
1

ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢？
ElementUI表格组件如何实现动态表头？
ElementUI使用表格组件时有遇到过问题吗？

插槽问题
1