Vue面试题复习

v-show和v-if的区别

v-show是通过控制css的display属性来实现显示和隐藏

v-if是通过控制dom层面的渲染和销毁，而不是显示和隐藏

频繁切换显示状态使用v-show，否则使用v-if

为什么要在v-for中使用key

必须用key，且不能是index和random，对于每一个元素，key值必须唯一

在diff算法中，需要通过判断tag和key值相同来判断两个节点是否是相同的节点

这样可以减少渲染次数，提升渲染性能

描述vue组件的生命周期

beforeCreate created

beforeMount mounted

beforeUpdate updated

beforeDestory destoryed

Vue组件如何通讯

父子组件通信：父传子通过props，子传父通过this.$emit

兄弟组件通信（或者两个没有层级关系的组件通信）：

通过自定义事件的方式通信

event.$on(绑定事件)

event.$emit(触发事件)

Vuex进行全局数据通信

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

1.input元素的value对应data中的this.name

2.绑定input事件，每次发生input事件，this.name=$event.target.value

3.data更新触发re-render

对MVVM的理解

整个mvvm模型分为三部分，分别是model（数据层），viewmodel（视图模型），view（视图层），viewmodel是组件，通过数据的变化来驱动视图的更新，即通过model的改变来触发view的改变。

为什么组件的data必须是一个函数？

当我们定义一个组件，本质上是定义了一个class

在不同的地方去引用组件，实际上是创了了这个class的不同的实例

如果data不是函数，那么不同实例中的数据就会互相影响干扰

而如果data是函数，那么这些数据就处在一个闭包之中，不同组件实例你改你的，我改我的，互不影响。

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

ajax请求应该放在mounted中，也就是dom加载完成以后

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

如果放在mounted之前没有用，dom没有渲染完，数据也不能够显示，这样做会使得逻辑混乱

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

使用$props

<子组件 v-bind="$props"/>

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

使用mixin

何时使用异步组件

1.加载大组件

2.路由异步加载

何时使用keep-alive

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

何时需要使用beforeDestory

解除自定义事件：event.$off

清除定时器

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

如果不进行上述操作，会造成内存泄漏

什么是作用域插槽

<父组件>
<子组件>
<template v-slot="mySlot">
{{mySlot.myobj.name}}
</template>
<子组件/>
<父组件/>

//子组件
<script>
<template>
   <slot :myobj="obj">
     
   </slot>
<template>

export default{
data(){
return{
obj:{
name:xxx;
}

}
}
}
</script>

Vuex中的action和mutation有什么区别

action中可以处理异步，mutation不可以

mutation做原子操作

action可以整合多个mutation

Vue-router常用的路由模式

hash模式

H5 history模式（需要服务端的支持）

如何配置Vue-router的异步加载

const router=new VueRouter({
routes:[
{
   path:'/',
   component:()=>import(./components/xxx)
},
{
   path:'/next',
   component:()=>import(./components/yyy)
}
]
});

请用Vnode描述一个DOM结构

//dom结构
<div id="div1" class="container">
<p>xxx</p>
<ul style="font-size:28px">
      <li>aaa</li>
</ul>
</div>

//用vnode方式描述
{
tag:'div',
props:{
id:div1,
class:container
},
children:[
{  
tag:'p',
children:[
'xxx'
]
},
{
tag:'ul',
props:{
style:'font-size:20px'
},
children[
{
  tag:'li',
  children:['aaa']
            }
         ]
      }
   ]
}

监听data变化的核心API

object.defineProperty

diff算法的时间复杂度

O（n）

vue响应式原理

const data ={};
const name="张三";

Object.defineProperty(data,name,{
get:function(name){
console.log(get);
return name;
},
set:function(newval){
name=newval;
updateview();
}
})

简述diff算法过程

只在同一层进行比较，不跨级比较

如果tag不同，直接删除重建，不进行深度比较

当tag和key都相同，判定二者是相同的节点，不再深度比较

vue常见性能优化方式

合理使用v-show和v-if

合理使用computed

使用v-for时加key

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

合理使用异步组件

合理使用keep-alive