VUE面试题

是Model-View-ViewModel的缩写，是一种架构模式，一种思想，一种组织和管理代码的方法，在MVVM架构中，Model和View不能直接通信，一定要通过ViewModel,ViewModel实现了一个观察者的角色，每当Model更新的时候VIewModel需要监听它，并通知相应的View做UI更新，同样，当用户操作View的时候，ViewModel也要获取数据上的变化通知Model进行更新，就实现了数据的双向绑定。

4、JS的数据类型有哪些？

字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol、对象（Object）、数组（Array）、函数（Function）

5、基本数据类型和引用数据类型的区别？

存储上的区别

1.基本数据类型是存放在栈中的简单数据段。

2.引用数据类型是存放在堆内存中的对象，在栈内存中存放的是堆内存中具体内容的引用地址，通过这个地址可以快速查找到对象。

比较上的区别

1.基本数据类型的比较是值的比较

var a = '{}'

var b = '{}'

console.log(a == b) //true

直接比较值，看起来一样那么他就是一样的。

2.引用类型的比较是引用的比较

var a = {}

var b = {}

console.log(a == b) //false

问：看起来明明一样为什么会是false？

答：因为引用类型比较的是地址，也就是比较两个对象保存在栈区的指向堆内存的地址是否相同，虽然看起来一样，但是他们指向堆内存的地址是不一样的，所以两个对象不相等。

赋值上的区别

1.基本数据类型的赋值是简单赋值，如果一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值，然后把这个值复制到为新变量分配的位置上。

var a = 10

var b = a

a++

console.log(a) //11

console.log(b) //10

a在内存中保存的值是10，当使用a的值来初始化b时，b中也保存了10，这两个值是完全独立的，相当于b把a的值复制了一份，所以两个变量的任何操作都不会互相影响。

2.引用类型的赋值是对象引用

var a = {}

var b = a

a.name = "haha"

console.log(a.name) //haha

console.log(b.name) //haha

b.age = 29

console.log(a.age) //29

console.log(b.age) //29

当一个变量向另一个变量赋值引用类型的值时，同样也会将栈内存中的值复制一份放到新变量分配的空间中，但是引用类型保存在栈内存中的变量是一个地址，这个地址指向的是堆内存中的对象，所以这个变量其实复制了一个地址，两个地址指向同一个对象，改变其中任何一个变量都会互相影响。

6、简述数组的api.

push()从数组的尾部插入一个或多个元素
pop()从数组的尾部删除一个元素
unshift() 从数组的头部插入一个或多个元素
shift() 从数组的头部删除一个元素
concat()连接一个或多个数组
map数组方法, 里面接受一个回调函数
splice(start, length, [可选参数列表]) start:开始裁切的下标, length:要裁切多少个
map(item,index,"原数组")
foreach(item,index,"原数组")
sort排序
spliceslice(start, end) start:开始裁切的下标, end:结束裁切的下标(end切不到) => 实际上裁切的范围是下标start到end-1
filter(item,index,"原数组")过滤条件
join 以特定的连接符, 把数组连接成字符串
reverse反转数组, 把数组的顺序进行颠倒
indexof在数组中查找指定元素如果有就返回下标, 如果没有返回-1 (可选参数: 从指定下标开始往后查找元素)
lastIndexOf() 获取元素在数组中第一次出现的下标，如果没有，返回-1
every返回值均是判断条件，只要其中有一项不满足，返回false
some返回值均是判断条件，只要其中有一项满足，返回true
find方法返回通过测试（函数内判断）的数组的第一个元素的值

7、说出你知道的VUE指令

v-text：插值绑定、语法也可以是 { {}}
v-html：绑定（渲染）html代码片段，相当于是原生的 innerHtml、有安全性问题，容易XSS攻击场景：商品详情<img src="" width="">注意场景：评论
v-show：显示一个dom元素，dom元素存在后不会被删除，属性值为true/false都会渲染到界面中，通过css的显示隐藏来控制
v-if、v-else-if、v-else: 动态显示一个dom元素，条件成立，dom元素才会真正显示出来、否则移除（不新增）真实dom 属性值为true/false 为true才会渲染到界面中惰性
v-for：循环当前所在的元素，当前！当前！当前！1.key的作用是什么
v-on: 简写@，绑定事件，鼠标的事件、键盘的事件、例如@click，@dbclick、@mouseup、@mousedown、@mousemove 可以是系统事件click 也可以是自定义事件子传父
v-bind: 绑定属性指令，可以是组件的 prop或者 attribute（width、height、style）
v-model: 值的双向绑定，通常用与input（text、password、radio、checkbox、number）、select
v-slot: 声明具名插槽或是期望接收 props 的作用域插槽

8、简述VUEX?

state 存放状态(数据) 必须的
mutations 对于state成员进行同步修改操作，可以异步
getters 获取state中的数据，类似于组件中的计算属性
actions 进行异步操作，异步得到结果后通知mutation修改state成员
modules 模块化状态管理，多状态文件管理时使用（一般写一次）

9、Vue-route分几种模式，区别是什么？

hash模式

就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。

由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange事件（hashchange只能改变 # 后面的 url片段）；虽然 hash路径出现在URL中，但是不会出现在 HTTP请求中，对后端完全没有影响，因此改变 hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

history模式

包含 back、forward、go方法；history 模式 URL就要和后端进行一致，所以要改为 history也需要后端的配合，否则会报错；history 每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。

10、为什么.vue文件中的data是一个函数？

因为组件是用来复用的，且JS里对象是引用关系，如果组件中data是一个对象，那么这样的作用域没有隔离，子组件中的data属性中的data属性值会相互影响，如果data是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的data属性值不会互相影响

11、简述$nexttick

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个任务队列，并缓冲在同一时间循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。（这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的）

然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行任务队列 (已去重的) 工作。

Vue 在内部对异步队列尝试使用原生的 Promise.then（微任务）、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0)（宏任务）代替。

12、简述尽可能多的组件传参，请完整描述

第一种：父传子
props: 传入的属性是只读的
第二种：子传父 this.$emit()

第三种: 跨组件(2.0之前，3.0后this.$on()取消了)
this.$emit() this.$on() 在需要的组件
第四种：插槽
默认插槽、具名插槽、作用域插槽

13、Vue中跳转界面的方式都几种？

1：router-link跳转

2：this.$router.push()

3：this.$router.go(1);

14、前后端交互时，为什么会出现跨域问题，如何解决

跨域问题是出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

解决办法

1、第一种解决办法：后端配置跨域（spring boot设置方式）

第一步：在后端的WebMvcConfig配置类中进行配置

第二步：在vue项目src目录下的http包中的config.js进行配置携带凭证（cookie）

2、第二种解决办法：前端配置代理（vue项目）

第一步：在config/index.js 文件，配置proxyTable

第二步：在config/dev.env.js文件中加上一句

15、vue与jquery的区别

1、工作原理

Vue做到了数据和视图完全分离开，它首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。对数据进行操作不再需要引用相应的dom对象，他们通过Vue对象实现数据和视图的相互绑定。

jQuery则是要先使用选择器（$）来选取dom对象，然后对dom对象进行操作（如赋值、取值、事件绑定等）。

2、侧重

vue侧重数据绑定，可以应用于复杂数据操作的后台页面。如：表单填写页面

jquery侧重样式操作，动画效果等；可以应用于一些html5的动画页面，一些需要js来操作页面样式的页面中。

16、或与非

js运算符
&& 运算方法：
只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
总结：一假为假

|| 运算方法：
只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。
总结：一真为真
位运算符：| 运算方法：
两个位只要有一个为1，那么结果都为1。否则就为0
|运算符还能进行取整运算
位运算符：& 运算方法：
两个数值的个位分别相与，同时为1才得1，只要一个为0就为0。

17、change与blur的内置指令有哪些

一、change

chattr命令用于改变文件属性
chgrp命令用于变更文件或目录的所属群组
chmod 可以藉以控制文件如何被他人所调用
chown 将指定文件的拥有者改为指定的用户或组，用户可以是用户名或者用户ID；组可以是组名或者组ID；文件是以空格分开的要改变权限的文件列表，支持通配符
chfn用来改变finger命令显示的信息。这些信息都存放在/etc目录里的passwd文件里。若不指定任何选项，则chfn命令会进入问答式界面
chsh命令用于更改使用者 shell 设定
chroot命令用于改变根目录

二、blur

v-blur指令，该指令在点击后，立即将按钮脱焦

18、数组遍历有哪些方法

forEach：遍历开始以后无法停止，如果要遍历整个数组，那就使用这个方法；
map：根据当前数组映射出一个新的数组；
some：遍历整个数组，返回值true就停止循环（返回false继续循环）；返回值：如果数组中的有一项回调函数返回true，那么结果为true，否则为false；（或者这样理解：数组别遍历完，那么结果为false，否则为true）
every：与some相反，返回false就停止循环（返回true就继续循环）；
filter：过滤数组，返回一个新的数组；
reduce：实现数据的累加；
for of 遍历数组/字符串；
indexOf() 遍历数组,返回元素在数组中第一次出现的下标，里面接收2个参数.参数1是要查找的元素,参数2是开始查找的下标。

19、VUE生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

生命周期函数
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。

20、created与mounted的区别

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

21、created中打印data是否可行

不可行，因为created和mounted执行时，异步初始化还没执行（还没执行完）。或者说当我在created/mounted里打印data的时候，这个异步请求还没发起，还没获取到data。所有的钩子都只是钩子，调用一次，没有参数，不关心返回值，可以是异步函数但不等待。所以我在created里调用异步方法做初始化，又在mounted里面根据这些初始化后的值初始化是行不通的，mounted不会等这些异步方法都执行完了再执行。

22、什么叫同步，什么叫异步

同步：在发出一个功能调用时，在没有得到返回结果之前一直在等待，不会继续往下执行。例： console 定义变量 for

异步：在发出一个功能调用时，不管没有没得到结果，都继续往下执行；例：ajax 定时器

注：当同步代码遇到异步代码时，永远是同步先执行，异步后执行

23、浮动的方式？

最低0.47元/天解锁文章

Alun丶0902

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE面试题

VUE
复制链接

扫一扫