必会的Vue面试题大全

1,568 阅读3分钟

1.v-show与v-if区别?

  • v-show是css样式切换,v-if是完整的销毁和重新创建;
  • 使用频繁切换时用v-show,切换较少时用v-if;
  • v-if=‘false’ v-if是条件渲染,当false的时候不会渲染。

2.动态绑定class的方法?

  • 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
  • 数组方法 v-bind:class="[class1, class2]"
  • 行内方法 v-bind:style="{color: color, fontSize: fontSize+'px'}"

3.计算属性和 watch 的区别?

  • 计算属性是动态监听依赖值的变化,从而动态返回内容;computed 是一个对象时,有get和set两个选项;
  • 监听是一个过程,在监听的值变化时,可以触发一个回调并做一些事情;
  • 区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch。
  • computed 和 methods 有什么区别?methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会。

4.组件中 data 为什么是函数?

  • 因为组件是来复用的,而js里对象的引用关系,这样作用域没有隔离,而new Vue的实例,是不会被复用的,因此不存在引用对象的问题。

5.怎样理解单向数据流?

  • 这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的,但是这个 prop 只能由父组件修改,子组件不能修改,否则会报错。子组件想修改时,只能通过 $emit 派发一个自定义事件,父组件接收到后,由父组件修改。 一般来说,对于子组件想要更改父组件状态的场景,可以有两种方案: 在子组件的 data 中拷贝一份 prop,data 是可以修改的,但 prop 不能。

6.生命周期?

  • 创建前后 beforeCreate/created。 在beforeCreate 阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象有了,el还没有。
  • 载入前后 beforeMount/mounted。 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前未虚拟的DOM节点,data尚未替换。在mounted阶段,vue实例挂载完成,data成功渲染。
  • 更新前后 beforeUpdate/updated。 当data变化时,会触发beforeUpdate和updated方法。这两个不常用,不推荐使用。
  • 销毁前后beforeDestory/destoryed。 beforeDestory是在vue实例销毁前触发,一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后,触发的destroyed。

7.路由的跳转方式?

  • router-link标签会渲染为a标签,咋填template中的跳转都是这种;
  • 另一种是编程式导航 也就是通过js跳转 比如 router.push('/home')。

8.Vue.js 2.x 双向绑定原理?

  • 核心的 API 是通过 Object.defineProperty() 来劫持各个属性的setter / getter,在数据变动时发布消息给订阅者,触发相应的监听回调,这也是为什么 Vue.js 2.x 不支持 IE8 的原因(IE 8 不支持此 API,且无法通过 polyfill 实现)。

9.理解Vue中的Render渲染函数?

  • VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数;
  • render函数return一个createElement组件中的子元素存储在组件实列中 $slots.default 中;
  • return createElement('h1', this.title); createElement返回的是包含的信息会告诉VUE页面上需要渲染什么样的节点及其子节点。我们称这样的节点为虚拟DOM,可以简写为VNode。

10.slot插槽?

  • 单个插槽。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
  • 命名插槽。 solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。 这样可以将父组件模板中 slot 位置,和子组件 slot 元素产生关联,便于插槽内容对应传递。
  • 作用域插槽scoped slots。可以访问组件内部数据的可复用插槽(reusable slot)。在父级中,具有特殊特性 slot-scope 的