2021 vue面试题

1.组件之间的传值

统一可以用的vuex
1.1 父组件---> 子组件
a)props 获取子组件标签上的属性；
b)用v-bind="$attrs"监听除了（class, style）之外的子组件标签的属性；v-on="$listeners"监听不包含（.native）修饰符的所有事件
c)也可以用this.$parent获取到父类中的数据

1.2 子组件->父组件
a) 用$emit() 配合事件传值
b) 给子组件定义ref,然后用this.$refs.ref获取子组件数据
c) 用this.$children找到对应的子组件
1.3 兄弟组件传值
a) 使用$on来传值，这种方式需要声明一个vue的实例，然后使用这个实例传值

import Vue from 'vue'

export default new Vue; // 新建一个文件声明；

A组件向B组件传值

import bus from './busEvent' // 引入声明
export default {
  name: 'One',
  data() {
    return {
      message: 123123
    }
  },
  methods:{
    dataGo(){
      --this.message
      bus.$emit('goData', this.message) // 通过$emit来发出数据
    }
  }
}

B组件

<script>
import bus from './busEvent'
export default {
  name: 'Two',
  data() {
    return {
      message: 123123
    }
  },
  mounted() {
    bus.$on('goData', (data) => { // 通过$on来接收，注意这里不是this.$on
      console.log(data);
      this.message = data
    })
  }
}
</script>

b) 还有一种就是往父组件传，然后父组件再往另一个组件传值

2.生命周期

• beforeCreate
  在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
• created
  在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
• beforeMount
  在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted
  el被新创建的vm.$el替代；注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick ; 该钩子在服务器端渲染期间不被调用。
• beforeUpdate
  在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
  该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
• updated
  在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：
• activated
  被 keep-alive 缓存的组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
• deactivated
  被 keep-alive 缓存的组件失活时调用。
  该钩子在服务器端渲染期间不被调用。
• beforeDestroy
  实例销毁之前调用。在这一步，实例仍然完全可用。
  该钩子在服务器端渲染期间不被调用。
• destroyed
  实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
  该钩子在服务器端渲染期间不被调用。
• errorCaptured (2.5.0+新增)
  在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

  2.1 vue组件包含子组件第一次加载时执行哪些生命周期钩子函数，更新的时候以及销毁的时候

加载：父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
更新：父beforeUpdate-子beforeUpdate-子updated-父updated
销毁：父beforeDestrory-子beforeDestroy-子destroyed-父destroyed

3.MVVM的理解和实现

理解：
MVVM （Model-view-viewmodel）是一种软件架构模式；MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑的开发分离开来。

MVVMPattern.png
原理：
Vue将遍历data对象所有的（property ）属性，并使用Object.defineProperty把这些（property ）属性全部转为getter/setter。它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
5d3c038ea4846.jpg
问题：

1. 组件数据更新watcher执行几次？
   答：一般同一个组件在属性更新时watcher会执行一次，会添加到watcher队列多次，在执行前会先去重。
2. 什么情况下Vue无法监听到对象或者数组变化？
   答：Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
   解决方式： 使用this.$set()
   Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：
vm.items.length = newLength
解决方式： 使用this.$set()

4.节点，树及虚拟DOM

节点，树

当浏览器读取html代码，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。

dom-tree.png
元素， 每段文字， 注释 都是一个节点

虚拟DOM

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

5.如何创建一个在body内的组件

 mounted () {
    this.$nextTick(() => {
      const body = document.querySelector('body')
      if (body.append) {
        body.append(this.$el)
      } else {
        body.appendChild(this.$el)
      }
    })
  }

6.slot 插槽

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
注: 2.6.0+ 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

7 指令的封装

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

使用情景

• 按钮权限
• 按钮点击效果
• 相对时间的转换
• 表单聚焦

8.diff算法的理解

9.为什么key,不能用下标

10.watch和computed的区别

11.vuex

12.如何实现v-model

13.vue的修饰符

• v-on: 的修饰符
  .stop - 调用 event.stopPropagation()。
  .prevent - 调用 event.preventDefault()。
  .capture - 添加事件侦听器时使用 capture 模式。
  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  .native - 监听组件根元素的原生事件。
  .once - 只触发一次回调。
  .left - (2.2.0) 只当点击鼠标左键时触发。
  .right - (2.2.0) 只当点击鼠标右键时触发。
  .middle - (2.2.0) 只当点击鼠标中键时触发。
  .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

• v-bind: 的修饰符
  .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
  .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
  .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

• v-model 的修饰符
  .lazy - 取代 input 监听 change 事件
  .number - 输入字符串转为有效的数字
  .trim - 输入首尾空格过滤

14.v-on 可以绑定多个事件

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

15. Vue.nextTick( [callback, context] )

• 用法：
  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。