vue面试题

最新推荐文章于 2024-04-04 11:49:38 发布

Stevetagelian

最新推荐文章于 2024-04-04 11:49:38 发布

阅读量121

点赞数

分类专栏：前端面试题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Stevetagelian/article/details/125193397

版权

前端面试题专栏收录该内容

5 篇文章 1 订阅

订阅专栏

vue面试题

1、怎么理解mvvm这种设计模式

M Model 模型指的是数据层
V View 视图
VM ViewModel 视图模型
视图模型构成模型与视图之间数据双向绑定的桥梁

2、v-if和v-show的区别，使用场景区别

1.v-if通过创建和销毁控制元素的显示与隐藏，v-show通过display属性控制

2.v-if的性能开销比v-show大

3.v-if 只有条件为真时才渲染标签，v-show无论条件都会渲染标签

4.v-if使用于不需要频繁切换元素的显示与隐藏的场景

3、事件修饰符和按键修饰符有哪些

事件修饰符：
	.prevent  阻止事件默认行为
    .stop     阻止事件冒泡
    .capture  设置事件捕获机制
    .self     只有点击元素自身才能触发事件
    .once     事件只触发一次
 按键修饰符：
    .tab
    .enter
    .esc
    .space
    .delete(捕获"删除"和"空格"键)
    .up
    .down
    .left
    .right

4、v-model修饰符有哪些

.trim   去除首尾空格
    .lazy   只在输入框失去焦点或按回车键时更新内容，不是实时更新
    .number 将数据转换成number类型(原本是字符串类型)

5、v-for中为什么要加key

key可以提供虚拟dom的更新效率
在vue中,默认就地复用策略，在DOM操作的时候，如果没有key会造成选项错乱
key只能是字符串或num类型
可以被diff算法识别

6、v-for和v-if的优先级

v-for优先级高于v-if
如果同时出现v-for和v-if，无论判断条件是否成立，都会执行一遍v-for循环，这样浪费性能，所以要尽可能的避免两者一起使用。

7、组件中的data为什么是函数,new Vue 实例里，data 可以直接是一个对象

1、组件中的data写成一个函数,函数有独立的作用域，这样每复用一次组件,data函数就会返回一份新的数据,实现了组件的复用性

2、由于对象是引用类型，使得所有组件实例共用了一份data,使组件无法复用
3、new vue里面的代码是不存在复用的情况，所以可以写成对象形式

8、computed和watch的区别是什么

computed支持缓存，watch不支持
computed不支持异步，watch支持
computed适用于一个数据受多个数据影响的场景，watch适用于一个数据影响多个数据
computed内的属性可以写成对象也可以写成函数的形式，watch只能写成对象的形式
computed中依赖数据发生变化调用get函数，本身发生变化时调用set函数
watch中数据发生变化调用handle函数，第一个参数是最新的值，第二个参数是改变前的值，immediate属性决定组件加载时是否立即触发handle函数，deep属性决定是否深入监听

9、组件化和模块化的区别

1、组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
2、模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。

10、怎么理解vue中的虚拟DOM

原理：	
	用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

好处：
	1、性能优化
    2、无需手动操作DOM
    3、可以跨平台，服务端渲染等

11、怎么理解vue的生命周期

 vue的生命周期：vue实例从创建到销毁的全过程，这个过程可以分为3个阶段
    第一阶段：初始化阶段   创建vue实例,准备数据,
	第二阶段：挂载阶段 准备模板,渲染视图
    第三阶段：数据更新阶段 当数据变化时，会进行新旧DOM的对比，对比出差异的部分，进行差异化更新。
    第四阶段：实例销毁阶段 当vm.$destroy()被调用，vue实例就会被销毁，释放相关资源，此时再更新数据，视图不会再变化。

12、vue 钩子函数有哪些，有哪些使用的场景

1、各阶段包含钩子： 
beforeCreate  在data数据注入到vm实例之前，此时vm身上没有数据
    created       在data数据注入到vm实例之前，此时vm身上有数据

    beforeMount   生成的结构替换视图之前，此时DOM还没更新
    mounted       生成的结构替换视图之前，此时DOM已经更新完成

    beforeUpdate  数据变化了，dom更新之前
    updated       数据变化了，dom更新之后
    
    activated     被keep-alive缓存的组件激活时调用
    deactivated   被keep-alive缓存的组件停用时调用

    beforeDestroy 实例销毁，是否资源之前
    destroyed     实例销毁，是否资源之后

    这些钩子函数会在vue的生命周期的不同阶段，自动被vue调用

2、常用的钩子函数使用场景：
    beforeCreate  做loading的一些渲染
    created       结束loading， 发送数据的请求，拿数据
    mounted       可以对dom进行操作
    updated       监视数据的更新
    beforeDestroy 销毁非vue资源，防止内存泄漏，例如清除定时器
    activated     当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。

13、vue组件传值的方式

1、父传子
    通过props传递
    父组件： <child :list = 'list' />
    子组件: props['list'],接收数据,接受之后使用和data中定义数据使用方式一样

2、子传父
	在父组件中给子组件绑定一个自定义的事件，子组件通过$emit()触发该事件并传值。
    父组件： <child @receive = 'getData' />
            getData(value){value就是接收的值}
    子组件: this.$emit('receive',value)

3、兄弟组件传值
	通过中央通信 let bus = new Vue()
    A组件：methods :{ 
    	    sendData(){
                bus.$emit('getData',value)
              } 发送
    B组件：created(){
        bus.$on(‘getData’,(value)=>{value就是接收的数据})
    } 进行数据接收

14、vue是如何获取DOM

1、先给标签设置一个ref值，再通过this.$refs.domName获取，这个操作要在mounted阶段进行。
2、例如：
<template>
	<div ref="test"></div>
</template>
mounted(){
   const dom = this.$refs.test 
}

15、v-on可以监听多个方法吗

可以
例如：
<input type="text" v-on="{ input:onInput,focus:onFocus }">

16、谈谈你对slot的了解

1、什么是插槽
	1.1 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
	1.2 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
    
2、插槽使用
	2.1 默认插槽  在子组件中写入slot，slot所在的位置就是父组件要显示的内容
    2.2 具名插槽  在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer
    			 在父组件中使用template并写入对应的slot名字来指定该内容在子组件中现实的位置
    2.3 作用域插槽  在子组件的slot标签上绑定需要的值<slot :data="user"></slot>
    	          在父组件上使用slot-scope=“user”来接收子组件传过来的值

17、vue中动态组件如何使用

1、在某个中使用 is 特性来切换不同的组件：
	<component :is="TabComponent"></component>   TabComponent:已注册组件的名字

18、router和route的区别

1、$router对象
    1）$router对象是全局路由的实例，是router构造方法的实例
    2）$router对象上的方法有：push()、go()、replace()
2、$route对象
    1）$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等
    2）$route对象上的属性有：path、params、query、hash等等

19、路由传参的方式和区别

答: 
1、方式：params 和 query
2、区别：1）params用的是name，传递的参数在地址栏不会显示，类似于post
        2）query用的是path,传递的参数会在地址栏显示出来，类似于get      
3、举例说明：
   1）params 传参
    传： this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
     接：this.$route.params.id
     
   2）query传参
     传：this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
      接：this.$route.query.id

20、Vue-router 路由有哪些模式

一般有两种模式：
        1、hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。
        2、history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

21、在使用计算属性的时,函数名和data数据源中的数据可以同名吗?

不可以
	在初始化vm的过程，因为不管是计算属性还是data还是props 都会被挂载在vm实例上，会把data覆盖了,因此 这三个都不能同名

22、vue中data的属性可以和methods中的方法同名吗?

不可以
	vue源码中的 initData() 方法会取出 methods 中的方法进行判断，如果有重复的就会报错

23、你知道style加scoped属性的用途和原理吗

用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式.
	scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的。

24、怎么解决vue动态设置img的src不生效的问题

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。
<img :src="require('@/assets/images/xxx.png')" />

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

原因：因为我们的事件是全局的，它并不会随着组件的销毁而自动注销，需要我们手动调用注销方法来注销。
解决：我们可以在组件的 beforeDestroy ,或 destroy 生命周期中执行注销方法，手动注销事件

25、你认为vue的核心是什么

组件化
双向数据绑定

27、在.vue文件中style是必须的吗？那script是必须的吗

在.vue 文件中，template是必须的，而script与style都不是必须的。都没有的话那就是一个静态网页

28、说说vue的优缺点

优点：
    1.数据驱动
    2.组件化
    3.轻量级
    4.SPA(单页面)
    5.版本3.0的界面化管理工具比较好使
    6.vue易入门
    7.中文社区强大，入门简单，提升也有很多的参考资料。
缺点：
    1.不支持IE8及以下浏览器
    2.吃内存（每个组件都会实例化一个Vue实例，实例的属性和方法很多）
    3.定义在data里面的对象，实例化时，都会递归的遍历转成响应式数据，然而有的响应式数据我们并不会用到，造成性能上的浪费