1. 犀牛前端部落首页
  2. 资讯杂谈

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

描述组件渲染和更新过程

Vue常见面试题含泪整理

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

  • input元素的value = this.name
  • 绑定input事件this.name = $event.target.value
  • data更新触发re-render

对MVVM的理解

Vue常见面试题含泪整理

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

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

发表评论

登录后才能评论