vue3面试题

日拱一卒无有尽，功不唐捐终入海

---

Vue3 升级了哪些重要功能

createApp、emits 属性、生命周期、多事件、Fragment、移除 .sync、异步组件的写法、移除 filter、Teleport、Suspense、Composition API

vue3的新特征

1. 响应系统的变动： 由原来的 Object.defineProperty 的 getter 和 setter，改变成为了 ES2015 Proxy 作为其观察机制
2. 虚拟DOM重写（Virtual DOM Rewrite）：虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点
3. 组件渲染的优化（优化插槽生成）： Vue2当中在父组件渲染同时，子组件也会渲染。 Vue3就可以单独渲染父组件、子组件
4. 静态树提升（Static Tree Hoisting）： 使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程
5. 静态属性提升（Static Props Hoisting）： 此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。
6. 总体来说： 更快、更小、更容易维护、更加友好、更容易使用
   
   

Vue2和Vue3的数据响应机制区别

Vue数据响应机制： JavaScript对象传入vue实例时，vue会遍历对象的所有property，并通过object.defineproperty 把这些 property 转化为 getter 和 setter，数据发生变化时，就会触发视图的更新；
不过这种方式有点缺陷，就是不能监测到对象属性的添加和删除，因此需要用vue.set()来添加和删除。并且也不能监听数组的变化；

• vue2的响应式是通过 object.defineproperty 实现的
• 而vue3则很好的解决了这个问题，Vue3 利用 Proxy（代理） 实现数据读取和设置拦截，在拦截 trap 中实现数据依赖收集和触发视图更新的操作。

vue2和vue3在写法区别

• Vue 3 的 Template 支持多个根标签，Vue 2 不支持
• Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
• v-model 代替以前的 v-model 和 .sync

<Switch :value=“y” @update:value=“y=$event”/>
vue2中的写法:<Switch:value.sync=“y”/>
vue3中的写法:<<Switch v=model:value=“y”>>

Vue3中的属性绑定

• 默认所有属性都绑定到根元素
• 使用 inheritAttrs: false 可以取消默认绑定
• 使用 attrs 或者 context.attrs 获取所有属性
• 使用 v-bing="$attrs" 批量绑定属性
• 使用 const {size, level, …rest} = context.attrs 将属性分开
• 使用场景： 在vue2中我们在父组件绑定 click事件，子组件必须内部触发click，而vue3在父组件绑定子组件的根元素上也会跟着绑定
  
  

Vue2和Vue3的生命周期

Vue2：

Vue3：

composition和options如何选用

composition API 优点：更好的代码组织、更好的逻辑复用、更好的类型推导

• 不建议共用，会引起混乱
• 小型项目，业务逻辑简单，用 Options API
• 中大型项目，逻辑复杂，用 Composition API

Vue3 为何比 Vue2 快

• proxy 响应式
• PatchFlag
• hoistStatic
• cacheHandler
• SSR 优化
• tree-shaking
  
  

Vue2 和 Vu3 diff 算法比较

• Vue2 没有区分静态节点和动态节点
• Vue3 新增静态标记 patchFlag 与上次虚拟节点比较时，只比较有 patchFlag 的节点
  
  

Composition API 和 React Hooks 对比

• Composition API setup 只会被调用一次，React Hooks 函数（组件）会被多次调用
• Composition API 无需 useMemo、useCallback，因为 setup 只调用一次
• Composition API 无需顾虑调用顺序，React Hooks 需要保证 hooks 的顺序一致（不能放到循环里、判断里，必须放在最外层的顺序代码里）
• Composition API reactive + ref 比 React Hooks 的 useState 要难理解
  
  

setup 中如何获取组件实例

• 在 setup 和其他 Composition API 中没有 this
• 可通过 getCurrentInstance 获取当前实例
• 若用 Options API 可照常使用 this
  
  

watch 和 watchEffect 的区别

• 两者都可监听 data 属性变化
• watch 需要明确监听哪个属性
• 默认是惰性执行，监听源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref
• watchEffect 会根据其中的属性，自动监听其变化
  
  

vue3中的teleport组件

• teleport 像是一个传送门，允许我们控制在哪个 dom 节点下呈现 html。to属性接受一个 querySelector ，设置父级节点
• 实现原理： 通过 createBlock 生成一个 vnode ，创建 teleport 组件，通过调用 Teleport.process ，选中父节点，mountChildren 方法挂在到 dom 中
  
  

说说虚拟dom及vue3中对虚拟dom对优化

• 虚拟dom就是一个js对象来描述dom节点，当数据发生变化时，对比变化前后的虚拟dom节点，通过dom-diff算法计算出需要更新的地方，然后来更新需要的视图
• vue中通过VNode类来实例化出不同类型的虚拟dom，比如注释节点通过isComment来表示是否是注释节点，text表示具体的注释信息
  
  

vue3 的 watch 与 vue2 中有哪些不同

• vue3 中的 watch 函数
  • 第一个参数为响应式对象、有 getter / setter 的 effect 函数、或者这些类型数组
  • 第二个参数为数据变化时的回调
  • 第三个参数为 watchOption，提供是否立即监听和是否深度监听的配置
• vue3 可以多次使用 watch 方法
• vue3 的 setup 中不存在this对象，监听路由需要使用 vue-router 提供的userRoute，vue2 则是在 watch 对象里添加 $route 进行监听
  
  

v-model的原理及vue3中v-model的改变

v-model 通过在数据修改时，通知父级节点实现数据的双向绑定。其实是一个语法糖当满足以下两个条件时，可实现自定义组件的 v-model：

• 子组件受控接收prop
• 数据修改时触发event把新的数据提交给父组件
• vue3 中升级了 v-mode 的用法，通过 update:modelValue 来触发事件，prop也被更改为 modelValue 。还在一个组件上支持多个 v-model，如新增 v-model:lastName 等