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

<template>
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要对应起来
        3. text1 属性对应起来
    -->
</template>

<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

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

• mixin
• 以及mixin的一些缺点

何时要使用异步组件

• 加载大组件
• 路由异步加载

何时需要使用keep-alive

• 缓存组件，不需要重复渲染
• 如多个静态tab页的切换
• 优化性能

何时需要使用beforeDestory

• 解绑自定义事件event.$off
• 清除定时器
• 解绑自定义的DOM事件，如window、scroll等

什么是作用域插槽

Index.vue

<ScopedSlotDemo :url="website.url">
  <template v-slot="slotProps">
  	{{slotProps.slotData.title}}
  </template>
</ScopedSlotDemo>

ScopedSlotDemo.vue

<template>
    <a :href="url">
        <slot :slotData="website">
            {{website.subTitle}} <!-- 默认值显示 subTitle ，即父组件不传内容时 -->
        </slot>
    </a>
</template>

<script>
export default {
    props: ['url'],
    data() {
        return {
            website: {
                url: 'http://wangEditor.com/',
                title: 'wangEditor',
                subTitle: '轻量级富文本编辑器'
            }
        }
    }
}
</script>

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结构

<div id="div1" class="container">
  <p>vdom</p>
  <ul style="font-size:20px">
    <li>a</li>
  </ul>
</div>

{
    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