Vue面试专题【含Vue3】

1.组件之间通讯方式

• 父子组件

vue2:props/$emit/$ref/$attrs  $children/$parent

vue3:props/emit/ref/attrs

• 兄弟组件

vue2:eventBus

vue3:mitt

• 跨级组件

vue2:vuex provide/inject

vue3:pinia provide/inject

2.v-if和v-for哪个优先级更高

vue2中 vfor优先级高，vue3中vif优先级高

vue2中vif和vfor一起使用，先渲染，后判断显示，增加了渲染开销；

vue3中先判断后渲染，判断的变量不一定已经存在了，可能会报错；

官方建议不要把两个指令一起使用，建议给筛选后的数据再绑定指令。

3.双向绑定的使用原理

vue双向绑定指的是驱动数据改变会引起界面改变，界面数据改变会引起驱动数据改变。在Vue中，我们常用的表单标签都能通过v-model指令实现双向绑定，自定义组件也可以通过props和emit('update:props')实现双向绑定；

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

4.如何扩展一个组件

组件模块扩展用mixins混入，内容扩展用slots插槽；

5.子组件可以直接修改父组件的数据么

不可以。当直接修改props的时候，会报错。如果子组件获取的props需要在子组件内部修改，可以将props备份到data上；需要修改父组件数据就向父组件emit事件，让父元素修改。

6.权限管理怎么做

路由权限管理：一般是前端配置所有的路由信息，在beforeEach中请求数据，过滤出当前角色有权限的路由；统一从后台获取路由信息，加载匹配的路由组件；

页面组件权限管理：实现一个指令，使后台返回的权限数据和当前组件权限匹配，判断是否显示；

7.对vue响应式的理解

vue通过追踪对象属性的读写；读取属性的时候，先执行track，在track内部，会查找当前是否有正在运行的副作用函数，把这个副作用函数添加到当前属性的订阅者中；在属性修改之后，执行trigger函数，trigger内部会查询当前属性的订阅副作用，执行它；

vue的组件状态是由响应式的对象组成。每个组件实例创建一个响应式副作用来渲染和更新 DOM。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

Vue 2 使用 getter / setter ， Vue 3 中则使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref。

8.对虚拟dom的理解

虚拟dom是一个编程概念，用一个javascript对象表现DOM结构，对象改变与DOM结构改变保持同步。在页面挂载时，运行时渲染器会遍历整个对象（虚拟DOM树）,来构建真实的DOM。

9.了解diff算法么

在对象变化后，渲染器会比对新旧对象，找出他们之间的区别，更新到真实的DOM上。

10.vue3有哪些新特性

 

 

从高层面的视角看，Vue 组件挂载时会发生如下几件事：

1. 编译：Vue 模板被编译为渲染函数：即用来返回虚拟 DOM 树的函数。这一步骤可以通过构建步骤提前完成，也可以通过使用运行时编译器即时完成。

2. 挂载：运行时渲染器调用渲染函数，遍历返回的虚拟 DOM 树，并基于它创建实际的 DOM 节点。这一步会作为响应式副作用执行，因此它会追踪其中所用到的所有响应式依赖。

3. 更新：当一个依赖发生变化后，副作用会重新运行，这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树，将它与旧树进行比较，然后将必要的更新应用到真实 DOM 上去。