Vue系列面试题

大家好,我是有用就扩散,有用就点赞。

1.Vue中组件间有哪些通信方式?

父子组件通信:

(1)props | $emit (接收父组件数据 | 传数据给父组件)

(2)ref | $refs(给普通的DOM元素或者子组件注册引用信息 | 获取通过ref注册的引用)

(3)$parent | $children(获取当前组件的父组件实例 | 获取当前组件的子组件实例)

多层级组件通信:

(1)provide | $inject(提供子组件要使用的数据 | 子组件获取父组件定义的数据)

(2)$attrs | l i s t e n e r s (获取一个组件没有声明 p r o p 时所包含的数据,搭配 i n h e r i t A t t r s : f a l s e 使用,设置继承 listeners(获取一个组件没有声明prop时所包含的数据,搭配inheritAttrs:false使用,设置继承 listeners(获取一个组件没有声明prop时所包含的数据,搭配inheritAttrs:false使用,设置继承attrs默认行为关闭 | 获取包含父作用域中的事件监听器)

非关系组件通信:

(1)(利用vue注册自定义事件)$emit | $on(发送数据 | 获取数据)

(2)Vuex 数据全局状态管理

  • state单一状态树(mapState获取多个状态,state获取数据)

  • mutation 更改Vuex的store中的状态的唯一方法(commit设置数据)

  • getter接受state作为其第一个参数

  • actions处理异步逻辑

(3)ocalstorage和sessionstorage用作存储数据

2.Vue中v-show和v-if的区别是什么?

v-show:是渲染组件,然后改变组件的display为block或none

v-if:是惰性渲染机制,在属性初始为false时,组件就不会被渲染,直到条件为true,并且切换条件时会触发销毁/挂载组件。

如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好

3.keep-alive组件有什么作用?

1)keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,避免重新渲染。

2)对于keep-alive组件来说,它拥有两个独有的生命周期钩子函数,分别为activated和deactivated。用keep-alive包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated钩子函数,命中缓存渲染后会执行actived钩子函数。

3)keep-alive几个重要的属性:

  • include - 只有名称匹配的组件会被缓存
  • exclude - 任何名称匹配的组件不会被缓存
  • max - 最多可以缓存多少组件实例

4.说下Vue生命周期钩子函数?

beforeCreate 组件实例刚被创建,组件属性计算之前

created 组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在

beforeMount 模板编译/挂载之前$el还不存在

mounted 模板编译/挂载之后(不保证组件已在DOM中)

beforeUpdate组件更新之前

updated组件更新之后

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

Vue3支持多个相同生命周期

setup是围绕beforeCreate和created生命周期钩子运行,在setup()内部调用生命周期钩子

在Vue2生命周期钩子前面加上"on"来访问组件的生命周期钩子

5.Vue中computed和watch区别?

computed是计算属性,依赖其他属性计算值,并且computed的值有缓存,只有当计算值变化才会返回内容。

watch监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

6.v-if和v-for为什么不能连用?

1)v-for优先于v-if被解析,从源码中发现,先处理静态节点,在处理once,在处理for,在处理if,代码显示for的优先级比if高,断点调试也证实for优先于if。在vue3中v-if优先于v-for被解析

2)如果同时使用,每次渲染都会先执行循环在判断条件,无论如何循环都避免不了,浪费了性能。

3)要避免出现这种情况,可以采用多层包裹来解决性能损耗问题。例如外层给标签绑定指令v-if或者是内层标签绑定v-if。

7.单页面应用和多页面应用区别及优缺点?

SPA优点:

(1)用户体验好、快,内容的改变不需要重新加载整个页面,基于这一点SPA对服务器压力较小

(2)前后端分离

(3)页面用户体检比较好

SPA缺点:

(1)不利于SEO

(2)导航不可用,需要自己实现导航

(3)初次加载耗时长

(4)页面复杂度提高

MPA优点:

(1)多页面应用对于SEO更加友好

(2)更容易扩展

(3)更易的数据分析

MPA缺点:

(1)程序开发成本高

(2)增加服务端压力,多页面会不停的加载

(3)用户体验相对较差

8.v-model该如何实现?

v-model本质上是v-on和v-bind的语法糖。v-model在内部为不同元素抛出不同的事件,如:

(1)text和textarea元素使用value属性和input事件

(2)checkbox和radio使用checked属性和change事件

(3)select字段将value作为prop并将change作为事件

(4)v-model作用在普通表单上

vue 复制代码
<input v-model="myvalue" />
//等同于
<input 
       v-bind:value="myvalue"
       v-on:input="myvalue=$event.target.value"
/>

(5)v-model作用在组件上

vue 复制代码
//html
<mycom v-model="myvalue"/>
//等同于
<mycom :value="myvalue" @input="(e)=>{myvalue=e}"/>

//mycom
<template>
<div>
    <input :value="value" @input="$emit('input',$event.target.value)"/>
</div>
</template>
<script>
export default {
    props:['value'],
}
</script>

9.mixin和mixis区别?

mixin用于全局混入,会影响到每个组件实例,通常插件都是这样做初始化的。比如:可以全局混入封装好的ajax或者一些工具函数等。

mixins用于单组件,是最常使用的扩展组件的方式。如果多个组件中有相同的业务逻辑,就可以将这些逻辑剥离出来,通过mixins混入代码。比如上拉下拉加载数据这种逻辑等。

mixin的问题?

(1)来源不清晰问题

(2)命名冲突问题

Vue3中不需要mixin,Vue3类似函数式编程,compostion api可以很好解决复用问题

10.Vue2中为什么检测不到数组的变化,如何解决?

由于JavaScript的限制,Vue不能检测数组变动。Vue2中采用Object.defineProperty来实现数据响应式,Object.definePropery虽然可以监听到数组的变化,但是由于在性能和体验的性价比上考虑,Vue2放弃了这个特性。

在Vue2中想实现数组的响应式可以通过全局Vue.set或者实例方法vm.$set来修改,使得数据变得响应式,也可以通过数组的变异方法来实现(push、pop、shift、unshift、splice、sort、reverse)

欢迎各位大哥投稿PR。

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果4 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询