关于vue.js:面试官vue2和vue3的区别有哪些

对于生命周期来说，整体上变动不大，只是大部分生命周期钩子名称上 +“on”，性能上是相似的。不过有一点须要留神，Vue3 在组合式 API（Composition API，上面开展）中应用生命周期钩子时须要先引入，而 Vue2 在选项 API（Options API）中能够间接调用生命周期钩子，如下所示。

// vue3
<script setup>     
import {onMounted} from 'vue';   // 应用前需引入生命周期钩子

onMounted(() => {// ...});

// 可将不同的逻辑拆开成多个 onMounted，仍然按程序执行，不会被笼罩
onMounted(() => {// ...});
</script>

// vue2
<script>     
export default {mounted() {   // 间接调用生命周期钩子            
    // ...         
  },           }
</script>

罕用生命周期比照如下表所示。

vue2	vue3
beforeCreate
created
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

Tips：setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不须要显式地去定义。

相熟 Vue2 的敌人应该分明，在模板中如果应用多个根节点时会报错，如下所示。

// vue2 中在 template 里存在多个根节点会报错
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

// 只能存在一个根节点，须要用一个 <div> 来包裹着
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

然而，Vue3 反对多个根节点，也就是 fragment。即以下多根节点的写法是被容许的。

<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

更多 vue 面试题解答参见前端 vue 面试题具体解答

Vue2 是选项 API（Options API），一个逻辑会散乱在文件不同地位（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当须要批改某个逻辑时，须要高低来回跳转文件地位。

Vue3 组合式 API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，加强了代码的可读性、内聚性，其还提供了较为完满的逻辑复用性计划。

Vue3 提供 Suspense 组件，容许程序在期待异步组件加载实现前渲染兜底的内容，如 loading，使用户的体验更平滑。应用它，需在模板中申明，并包含两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。

<tempalte>
  <suspense>
    <template #default>
      <List />
    </template>
    <template #fallback>
      <div>
        Loading...      </div>
    </template>
  </suspense>
</template>

在 List 组件（有可能是异步组件，也有可能是组件外部解决逻辑或查找操作过多导致加载过慢等）未加载实现前，显示 Loading…（即 fallback 插槽内容），加载实现时显示本身（即 default 插槽内容）。

Vue3 提供 Teleport 组件可将局部 DOM 挪动到 Vue app 之外的地位。比方我的项目中常见的 Dialog 弹窗。

<button @click="dialogVisible = true"> 显示弹窗 </button>
<teleport to="body">
  <div class="dialog" v-if="dialogVisible">
    我是弹窗，我间接挪动到了 body 标签下  </div>
</teleport>

Vue2 响应式原理根底是 Object.defineProperty；Vue3 响应式原理根底是 Proxy。

Object.defineProperty
根本用法：间接在一个对象上定义新的属性或批改现有的属性，并返回对象。

let obj = {};
let name = 'leo';
Object.defineProperty(obj, 'name', {enumerable: true,   // 可枚举（是否可通过 for...in 或 Object.keys() 进行拜访）configurable: true,   // 可配置（是否可应用 delete 删除，是否可再次设置属性）// value: '',   // 任意类型的值，默认 undefined
  // writable: true,   // 可重写
  get() {return name;},
  set(value) {name = value;}
});

Tips：writable 和 value 与 getter 和 setter 不共存。

搬运 Vue2 外围源码，略删减。

function defineReactive(obj, key, val) {
  // 一 key 一个 dep
  const dep = new Dep()

  // 获取 key 的属性描述符，发现它是不可配置对象的话间接 return
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {return}

  // 获取 getter 和 setter，并获取 val 值
  const getter = property && property.get
  const setter = property && property.set
  if((!getter || setter) && arguments.length === 2) {val = obj[key] }

  // 递归解决，保障对象中所有 key 被察看
  let childOb = observe(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // get 劫持 obj[key] 的 进行依赖收集
    get: function reactiveGetter() {const value = getter ? getter.call(obj) : val
      if(Dep.target) {
        // 依赖收集
        dep.depend()
        if(childOb) {
          // 针对嵌套对象，依赖收集
          childOb.dep.depend()
          // 触发数组响应式
          if(Array.isArray(value)) {dependArray(value)
          }
        }
      }
    }
    return value
  })
  // set 派发更新 obj[key]
  set: function reactiveSetter(newVal) {
    ...
    if(setter) {setter.call(obj, newVal)
    } else {val = newVal}
    // 新值设置响应式
    childOb = observe(val)
    // 依赖告诉更新
    dep.notify()}
}

那 Vue3 为何会摈弃它呢？那必定是因为它存在某些局限性。

次要起因：无奈监听对象或数组新增、删除的元素。

Vue2 相应解决方案：针对罕用数组原型办法 push、pop、shift、unshift、splice、sort、reverse 进行了 hack 解决；提供 Vue.set 监听对象 / 数组新增属性。对象的新增 / 删除响应，还能够 new 个新对象，新增则合并新属性和旧对象；删除则将删除属性后的对象深拷贝给新对象。

Proxy
Proxy 是 ES6 新个性，通过第 2 个参数 handler 拦挡指标对象的行为。相较于 Object.defineProperty 提供语言全范畴的响应能力，打消了局限性。

局限性：

(1)、对象 / 数组的新增、删除

(2)、监测 .length 批改

(3)、Map、Set、WeakMap、WeakSet 的反对

根本用法：创建对象的代理，从而实现基本操作的拦挡和自定义操作。

let handler = {get(obj, prop) {return prop in obj ? obj[prop] : '';
  },
  set() {// ...},
  ...
};

搬运 vue3 的源码 reactive.ts 文件。

function createReactiveObject(target, isReadOnly, baseHandlers, collectionHandlers, proxyMap) {
  ...
  // collectionHandlers: 解决 Map、Set、WeakMap、WeakSet
  // baseHandlers: 解决数组、对象
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

Vue3 相比于 Vue2，虚构 DOM 上减少 patchFlag 字段。咱们借助 Vue3 Template Explorer 来看。

<div id="app">
  <h1>vue3 虚构 DOM 解说 </h1>
  <p> 今天天气真不错 </p>
  <div>{{name}}</div>
</div>

渲染函数如下所示。

import {createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId} from vue

const _withScopeId = n => (_pushScopeId(scope-id),n=n(),_popScopeId(),n)
const _hoisted_1 = {id: app}
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(h1, null, vue3 虚构 DOM 解说, -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(p, null, 今天天气真不错, -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createElementBlock(div, _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode(div, null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ]))
}

留神第 3 个_createElementVNode 的第 4 个参数即 patchFlag 字段类型。

字段类型状况：1 代表节点为动静文本节点，那在 diff 过程中，只需比对文本对容，无需关注 class、style 等。除此之外，发现所有的动态节点（HOISTED 为 -1），都保留为一个变量进行动态晋升，可在从新渲染时间接援用，无需从新创立。

// patchFlags 字段类型列举
export const enum PatchFlags { 
  TEXT = 1,   // 动静文本内容
  CLASS = 1 << 1,   // 动静类名
  STYLE = 1 << 2,   // 动静款式
  PROPS = 1 << 3,   // 动静属性，不蕴含类名和款式
  FULL_PROPS = 1 << 4,   // 具备动静 key 属性，当 key 扭转，须要进行残缺的 diff 比拟
  HYDRATE_EVENTS = 1 << 5,   // 带有监听事件的节点
  STABLE_FRAGMENT = 1 << 6,   // 不会扭转子节点程序的 fragment
  KEYED_FRAGMENT = 1 << 7,   // 带有 key 属性的 fragment 或局部子节点
  UNKEYED_FRAGMENT = 1 << 8,   // 子节点没有 key 的 fragment
  NEED_PATCH = 1 << 9,   // 只会进行非 props 的比拟
  DYNAMIC_SLOTS = 1 << 10,   // 动静的插槽
  HOISTED = -1,   // 动态节点，diff 阶段疏忽其子节点
  BAIL = -2   // 代表 diff 应该完结
}

Vue3 的 cacheHandler 可在第一次渲染后缓存咱们的事件。相比于 Vue2 无需每次渲染都传递一个新函数。加一个 click 事件。

<div id="app">
  <h1>vue3 事件缓存解说 </h1>
  <p> 今天天气真不错 </p>
  <div>{{name}}</div>
  <span onCLick=() => {}><span>
</div>

渲染函数如下所示。

import {createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId} from vue

const _withScopeId = n => (_pushScopeId(scope-id),n=n(),_popScopeId(),n)
const _hoisted_1 = {id: app}
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(h1, null, vue3 事件缓存解说, -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(p, null, 今天天气真不错, -1 /* HOISTED */))
const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(span, { onCLick: () => {}}, [/*#__PURE__*/_createElementVNode(span)
], -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createElementBlock(div, _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode(div, null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _hoisted_4
  ]))
}

察看以上渲染函数，你会发现 click 事件节点为动态节点（HOISTED 为 -1），即不须要每次从新渲染。

搬运 Vue3 patchChildren 源码。联合上文与源码，patchFlag 帮忙 diff 时辨别动态节点，以及不同类型的动静节点。肯定水平地缩小节点自身及其属性的比对。

function patchChildren(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  // 获取新老孩子节点
  const c1 = n1 && n1.children
  const c2 = n2.children
  const prevShapeFlag = n1 ? n1.shapeFlag : 0
  const {patchFlag, shapeFlag} = n2

  // 解决 patchFlag 大于 0 
  if(patchFlag > 0) {if(patchFlag && PatchFlags.KEYED_FRAGMENT) {
      // 存在 key
      patchKeyedChildren()
      return
    } els if(patchFlag && PatchFlags.UNKEYED_FRAGMENT) {
      // 不存在 key
      patchUnkeyedChildren()
      return
    }
  }

  // 匹配是文本节点（动态）：移除老节点，设置文本节点
  if(shapeFlag && ShapeFlags.TEXT_CHILDREN) {if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {unmountChildren(c1 as VNode[], parentComponent, parentSuspense)
    }
    if (c2 !== c1) {hostSetElementText(container, c2 as string)
    }
  } else {
    // 匹配新老 Vnode 是数组，则全量比拟；否则移除以后所有的节点
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense,...)
      } else {unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true)
      }
    } else {if(prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {hostSetElementText(container, '')
      } 
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {mountChildren(c2 as VNodeArrayChildren, container,anchor,parentComponent,...)
      }
    }
  }
}

patchUnkeyedChildren 源码如下所示。

function patchUnkeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  c1 = c1 || EMPTY_ARR
  c2 = c2 || EMPTY_ARR
  const oldLength = c1.length
  const newLength = c2.length
  const commonLength = Math.min(oldLength, newLength)
  let i
  for(i = 0; i < commonLength; i++) {
    // 如果新 Vnode 曾经挂载，则间接 clone 一份，否则新建一个节点
    const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as Vnode)) : normalizeVnode(c2[i])
    patch()}
  if(oldLength > newLength) {
    // 移除多余的节点
    unmountedChildren()} else {
    // 创立新的节点
    mountChildren()}

}

Tree-shaking：模块打包 webpack、rollup 等中的概念。移除 JavaScript 上下文中未援用的代码。次要依赖于 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件应用。

以 nextTick 为例子，在 Vue2 中，全局 API 裸露在 Vue 实例上，即便未应用，也无奈通过 tree-shaking 进行打消。

import Vue from 'vue';

Vue.nextTick(() => {// 一些和 DOM 无关的货色});

Vue3 中针对全局和外部的 API 进行了重构，并思考到 tree-shaking 的反对。因而，全局 API 当初只能作为 ES 模块构建的命名导出进行拜访。

import {nextTick} from 'vue';   // 显式导入

nextTick(() => {// 一些和 DOM 无关的货色});

通过这一更改，只有模块绑定器反对 tree-shaking，则 Vue 应用程序中未应用的 api 将从最终的捆绑包中打消，获得最佳文件大小。

受此更改影响的全局 API 如下所示。

Vue.nextTick
Vue.observable（用 Vue.reactive 替换）
Vue.version
Vue.compile（仅全构建）
Vue.set（仅兼容构建）
Vue.delete（仅兼容构建）

外部 API 也有诸如 transition、v-model 等标签或者指令被命名导出。只有在程序真正应用才会被捆绑打包。Vue3 将所有运行性能打包也只有约 22.5kb，比 Vue2 轻量很多。

Vue3 由 TypeScript 重写，绝对于 Vue2 有更好的 TypeScript 反对。

Vue2 Options API 中 option 是个简略对象，而 TypeScript 是一种类型零碎，面向对象的语法，不是特地匹配。
Vue2 须要 vue-class-component 强化 vue 原生组件，也须要 vue-property-decorator 减少更多联合 Vue 个性的装璜器，写法比拟繁琐。

Vue 组件能够用两种不同的 API 格调编写：Options API 和 Composition API。

应用 Options API，咱们应用选项对象定义组件的逻辑，例如 data、methods 和 mounted。由选项定义的属性在 this 外部函数中公开，指向组件实例，如下所示。

<template>
  <button @click="increment">count is: {{count}}</button>
</template>

<script>
export default {data() {return {      count: 0}  },  methods: {increment() {this.count++;}  },  mounted() {    console.log(`The initial count is ${this.count}.`);  }}
</script>

应用 Composition API，咱们应用导入的 API 函数定义组件的逻辑。在 SFC 中，Composition API 通常应用

<template>
  <button @click="increment">Count is: {{count}}</button>
</template>

<script setup>
import {ref, onMounted} from 'vue'; 
const count = ref(0); 
function increment() {  count.value++;} 
onMounted(() => {  console.log(`The initial count is ${count.value}.`);})
</script>

关于vue.js:面试官vue2和vue3的区别有哪些

一、Vue3 与 Vue2 区别详述

1. 生命周期

2. 多根节点

更多 vue 面试题解答参见前端 vue 面试题具体解答

3. Composition API

4. 异步组件（Suspense）

5. Teleport

6. 响应式原理

7. 虚构 DOM

8. 事件缓存

9. Diff 算法优化

10. 打包优化

11. TypeScript 反对

二、Options API 与 Composition API

1. Options API

2. Composition API

一、Vue3 与 Vue2 区别详述

1. 生命周期

2. 多根节点

更多 vue 面试题解答参见 前端 vue 面试题具体解答

3. Composition API

4. 异步组件（Suspense）

5. Teleport

6. 响应式原理

7. 虚构 DOM

8. 事件缓存

9. Diff 算法优化

10. 打包优化

11. TypeScript 反对

二、Options API 与 Composition API

1. Options API

2. Composition API

更多 vue 面试题解答参见前端 vue 面试题具体解答