阅读 1233

Vue初级面试题汇总

Vue2.0兼容IE哪个版本以上吗?

参考答案

不支持ie8及以下,部分兼容ie9 ,完全兼容10以上, 因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。

请描述下vue的生命周期是什么?

参考答案
  • beforeCreate:实例创建前被调用;
  • created:实例创建后被调用,完成数据观测,属性和方法的运算,watch/event事件回调,模板渲染成html前(vm.$el未定义)故数据初始化最好在这阶段完成;
  • beforeMount:在$el挂载前被调用,相关的 render 函数首次被调用,期间将模块渲染成html,此时vm.$el还是未定义;
  • mounted:在$el挂载后被调用,此时vm.$el可以调用,不能保证所有的子组件都挂载,要等视图全部更新完毕用vm.$nextTick();
  • beforeUpdate:数据更新时调用;
  • updated:数据更新后调用;
  • activated<keep-alive></keep-alive>包裹的组件激活时调用;
  • deactivated:<keep-alive></keep-alive>包裹的组件离开时调用;
  • beforeDestroy:实例销毁之前调用,此时实例仍然完全可用;
  • destroyed:实例销毁之后调用,此时实例的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

computed中的属性名和data中的属性名可以相同吗?

参考答案

不能同名,因为不管是computed属性名还是data数据名还是props数据名都会被挂载在vm实例上,因此这三个都不能同名。

if (key in vm.$data) {
    warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
    warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
复制代码

data的属性名可以和methods中的属性名相同吗?

参考答案

不能同名,因为看源码

let data = vm.$options.data
const keys = Object.keys(data)
const methods = vm.$options.methods
let i = keys.length
while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
        if (methods && hasOwn(methods, key)) {
            warn(
              `Method "${key}" has already been defined as a data property.`,
              vm
            )
        }
    }
}
复制代码

怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢?

参考答案

<keep-alive></keep-alive>内置组件包裹路由组件,在钩子函数activated中更新。

跟keep-alive有关的生命周期是哪些?

参考答案
  • activated钩子:keep-alive 组件激活时调用。
  • deactivated钩子:keep-alive 组件停用时调用。
  • 以上钩子服务器端渲染期间不被调用。

watch的属性使用箭头函数定义可以吗?

参考答案

不可以。this会是undefind,因为箭头函数中的this指向的是定义时的this,而不是执行时的this,所以不会指向Vue实例的上下文。

watch:{
    show:(val)=>{
        console.log(this)//undefind this会指向show
    },
    id(val){
        conosle.log(this)//Vue实例对象
    }
}
复制代码

怎么在watch监听开始之后立即被调用?

参考答案

在选项参数中指定immediate: true将立即以表达式的当前值触发回调。

watch怎么深度监听对象变化?

参考答案
watch:{
   a:{
       handler:function(val,oldval){
           
       },
       deep:true
   }
}
复制代码

methods的方法用箭头函数定义可以吗?

参考答案

不可以。this会是undefind,因为箭头函数中的this指向的是定义时的this,而不是执行时的this,所以不会指向Vue实例的上下文。

怎么强制刷新组件?

参考答案
  • this.$forceUpdate()。
  • 组件上加上key,然后变化key的值。

父组件中的自定义事件怎么接收子组件的多个参数?

参考答案

this.$emit('eventName',data),data可以是个对象,包含子组件的多个参数,然后传给父组件。

给组件绑定自定义事件无效怎么解决?

参考答案 加上修饰词.native。

怎么访问子组件的实例或者子元素?

参考答案
  • 先用ref特性为子组件赋予一个ID引用<base-input ref="myInput"></<base-input>
    • 比如子组件有个focus的方法,可以这样调用this.$refs.myInput.focus()
    • 比如子组件有个value的数据,可以这样使用this.$refs.myInput.value
  • 先用ref特性为普通的 DOM 元素赋予一个ID引用
    <ul ref="mydiv">
        <li class="item">第一个li</li>
        <li class="item">第一个li</li>
    </ul>
    console.log(this.$refs['mydiv'].getElementsByClassName('item')[0].innerHTML)//第一个li
    复制代码

怎么在子组件中访问父组件的实例?

参考答案

使用this.$parent来访问

怎么在组件中访问到根实例?

参考答案

this.$root

组件会在什么时候下被销毁?

参考答案
  • 没有使用keep-alive时的路由切换;
  • v-if='false'
  • 执行vm.$destroy()

is这个特性你有用过吗?主要用在哪些方面?

参考答案
  • 动态组件

    <component :is="componentName"></component>componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。

  • is的用法

    有些HTML元素,诸如 <ul>、<ol>、<table><select>,对于哪些元素可以出现在其内部是有严格限制的。

    而有些HTML元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。

    <ul>
        <card-list></card-list>
    </ul>
    复制代码

    所以上面<card-list></card-list>会被作为无效的内容提升到外部,并导致最终渲染结果出错。应该这么写:

    <ul>
        <li is="cardList"></li>
    </ul>
    复制代码

Vue组件之间的通信都有哪些?

参考答案
  • props
  • this.$emit('input',data)
  • this.$root.$on('input',function(data){})this.$root.$emit('emit',data)
  • this.$refs.tree
  • this.$parent
  • provideinject
  • vueX

prop验证的type类型有哪几种?

参考答案

String、Number、Boolean、Array、Object、Date、Function、Symbol, 此外还可以是一个自定义的构造函数Personnel,并且通过 instanceof 来验证propwokrer的值是否是通过这个自定义的构造函数创建的。

function Personnel(name,age){
    this.name = name;
    this.age = age;
}
export default {
    props:{
        wokrer:Personnel
    }
}
复制代码

prop是怎么做验证的?可以设置默认值吗?

参考答案
export default {
    props:{
        propA:[String,Number],
        propB:{
            type:Number,
            default:1,
        },
        propC:Boolean,
        propD:{
            type:Object,
            default(){
                return{}
            }
        }
    }
}
复制代码

在Vue事件中是如何使用event对象的?

参考答案
  • @click="handleOpen" 默认第一个参数传入event对象;
  • @click="handleOpen(0, $event)",如果自己需要传入参数和event对象,则需要使用$event来获取event对象并传入handleOpen。

在Vue事件中传入$event,使用$event.target$event.currentTarget有什么区别?

参考答案

$event.currentTarget始终指向事件所绑定的元素,而$event.target指向事件发生时的元素。

写出你知道的表单修饰符和事件修饰符

参考答案
  • 事件修饰符
    • .stop:阻止事件传递;
    • .prevent: 阻止默认事件;
    • .capture :在捕获的过程监听,没有capture修饰符时都是默认冒泡过程监听;
    • .self:当前绑定事件的元素才能触发;
    • .once:事件只会触发一次;
    • .passive:默认事件会立即触发,不要把.passive.prevent一起使用,因为.prevent将不起作用。
  • 表单修饰符.number .lazy .trim

使用事件修饰符要注意什么?

参考答案

要注意顺序很重要,用@click.prevent.self会阻止所有的点击,而@click.self.prevent只会阻止对元素自身的点击。

说说你对Vue的表单修饰符.lazy的理解。

参考答案 input标签v-model用lazy修饰之后,并不会立即监听input的value的改变,会在input失去焦点之后,才会监听input的value的改变。

Vue如何监听键盘事件?

参考答案

使用按键修饰符 <input @keyup.enter="submit">按下回车键时候触发submit事件。

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

写出你常用的指令有哪些?

参考答案

v-showv-ifv-else-ifv-elsev-forv-onv-bindv-modelv-oncev-slotv-htmlv-text

v-once的使用场景有哪些?

参考答案 其作用是只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。故当组件中有大量的静态的内容可以使用这个指令。

v-show和v-if有什么区别?使用场景分别是什么?

参考答案
  • v-show,切换元素的display属性,来控制元素显示隐藏,初始化会渲染,适用频繁显示隐藏的元素,不能用在<template>上;
  • v-if,通过销毁并重建组件,来控制组件显示隐藏,初始化不会渲染,不适用频繁显示隐藏的组件,可以用在<template>上。

v-on可以绑定多个方法吗?

参考答案

可以,v-on后面接一个对象,但是不支持事件修饰符。

<template>
    <div v-on:{click:a,dblclick:b}></div>
</template>
<script>
    methods:{
        a(){
            alert(1)
        },
        b(){
            alert(2)
        }
    }
</script>
复制代码

v-cloak和v-pre有什么作用

参考答案
  • v-cloak:可以解决在页面渲染时把未编译的 Mustache 标签({{value}})给显示出来。
    [v-cloak] {
        display: none!important;
    }
    <div v-cloak>
        {{ message }}
    </div>
    复制代码
  • v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。 <span v-pre>{{ this will not be compiled }}</span>

:class和:style有几种表示方式?

参考答案

4种,动态绑定Class和Style

在.vue文件中style是必须的吗?那script是必须的吗?

参考答案 都不是必须的。

怎么使css样式只在当前组件中生效?

参考答案

<style lang="less" scoped></style>

在style上加scoped属性需要注意哪些?

参考答案

如果在公共组件中使用,修改公共组件的样式需要用/deep/

你知道style上加scoped属性的原理吗?

参考答案 vue通过在DOM结构以及css样式上加上唯一的标记`data-v-xxxxxx`,保证唯一,达到样式私有化,不污染全局的作用。

Vue渲染模板时怎么保留模板中的HTML注释呢?

参考答案
  • 在组件中将comments选项设置为true
  • <template comments> ... <template>

vm.$nextTick有什么作用?

参考答案

vm.$nextTick(() =>{this.handleadd()}),将handleadd回调延迟到下次 DOM 更新循环之后执行。

Vue中怎么重置data?

参考答案

Object.assign(this.$data,this.$options.data())

手写一个过滤器

参考答案
filters:{
    addUnit(val){
        if(val){
            return val+'元/米'
        }else{
            return ''
        }
    }
}
Vue.filter('addUnit',function(val){
    if(val){
        return val+'元/米'
    }else{
        return ''
    }
})
new Vue({
  // ...
})
复制代码

过滤器中可以用this吗?

参考答案 不可以

其它Vue系列面试题

关注下面的标签,发现更多相似文章
评论