vue插槽面试题_Vue常见面试题含泪整理

v-show和v-if的区别

v-show通过CSS display控制显示和隐藏

v-if组件真正的渲染和销毁，而不是显示和隐藏

为何在v-for中用key

必须用key，且不能是index和random

diff算法中通过tag和key来判断，是否是sameNode

减少渲染次数，提升渲染性能

描述Vue组件生命周期(父子组件)

单组件生命周期图

父子组件生命周期关系

Vue组件如何通讯(常见)

父子组件props和this.$emit

自定义事件event.$on、event.$off、event.$emit

Vuex

描述组件渲染和更新过程

双向数据绑定v-model的实现原理

input元素的value = this.name

绑定input事件this.name = $event.target.value

data更新触发re-render

对MVVM的理解

computed有何特点

缓存，data不变不会重新计算

提高性能

为何组件data必须是一个函数

为了避免共享实例

ajax请求应该放在哪个生命周期

mounted

JS是单线程的，ajax异步获取数据

放在mounted之前没有用，只会让逻辑更加混乱

如何将组件所有props传递给子组件

$props

< User v-bind=”$props” />

细节知识点，优先级不高

如何自己实现v-model

:value="text1"

@input="$emit('change1', $event.target.value)"

>

export default {

model: {

prop: 'text1', // 对应 props text1

event: 'change1'

},

props: {

text1: String,

default() {

return ''

}

}

}

多个组件有相同的逻辑，如何抽离

mixin

以及mixin的一些缺点

何时要使用异步组件

加载大组件

路由异步加载

何时需要使用keep-alive

缓存组件，不需要重复渲染

如多个静态tab页的切换

优化性能

何时需要使用beforeDestory

解绑自定义事件event.$off

清除定时器

解绑自定义的DOM事件，如window、scroll等

什么是作用域插槽

Index.

{{slotProps.slotData.title}}

ScopedSlotDemo.vue

{{website.subTitle}}

export default {

props: ['url'],

data() {

return {

website: {

url: 'http://wangEditor.com/',

title: 'wangEditor',

subTitle: '轻量级富文本编辑器'

}

}

}

}

Vuex中action和mutation有何区别

action中处理异步，mutation不可以

mutation做原子操作

action可以整合多个mutation

Vue-router常用的路由模式

hash(默认)

H5 history(需要服务端支持)

两者比较

如何配置Vue-router异步加载

export default new VueRouter({

routes:[

{

path:"/"

component:()=>import(

/* webpackChunkName:"navigator" */

"./../components/Navigator"

)

}

]

})

请用vnode描述一个DOM结构

vdom

• a

{

tag:"div",

props:{

className:"container",

id:"div1"

},

context:"",

children:[

{

tag:"p",

context:"vdom",

children:[]

},

{

tag:"ul",

props:{

style:"font-size:20px"

},

context:"",

children:[

{

tag:"li",

context:"a",

children:[]

}

//...

]

}

]

}

监听data变化的核心API是什么

Object.defineProperty

以及深度监听、监听数组

有何缺点

Vue如何监听数组变化

Object.defineProperty不能监听数组变化

重新定义原型，重写push、pop等方法，实现监听

proxy可以原生支持监听数组变化

请描述响应式原理

监听data变化

组件渲染和更新的流程

diff算法的时间复杂度

O(n)

在O(n^3)基础上做了一些调整

简述diff算法过程

patch(elem,vnode)和patch(vnode,newVnode)

patchVnode和addVnodes和removeVnodes

updateChildren(key的重要性)

Vue为何是异步渲染，$nextTick何用

异步渲染(以及合并data修改)，以提高渲染性能

$nextTick在DOM更新完之后，触发回调

Vue常见性能优化方式

合理使用v-show和v-if

合理使用computed

v-for时加key，以及避免和v-if同时使用

自定义事件、DOM事件及时销毁

合理使用异步组件

合理使用keep-alive

data层级不要太深

使用vue-loader在开发环境做模版编译(预编译)

webpack层面的优化

前端通用的性能优化，如图片懒加载

使用SSR

原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/4376.html