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
• provide和inject
• 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-show、v-if、v-else-if、v-else、v-for、v-on、v-bind、v-model、v-once、v-slot、v-html、v-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-clock和v-pre有什么做用

参考答案

• v-clock：能够解决在页面渲染时把未编译的 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吗？

参考答案

不能够