What are the differences between vue2 and vue3 in front-end interview

// vue3
<script setup>     
import { onMounted } from 'vue';   // Lifecycle hooks need to be introduced before useonMounted(() => {
  // ...
});
// Different logic can be split into multiple onMounted, and still executed in order, and will not be overwritten.onMounted(() => {
  // ...
});
</script>
// vue2
<script>     
export default {           mounted() {   // Directly call the life cycle hook    // ...         
  },           }
</script>

// There are multiple root nodes in template in vue2 and will report an error<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>
// There can only be one root node, and it needs to be wrapped with a <div>&lt;template&gt;
  &lt;div&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;main&gt;&lt;/main&gt;
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;
&lt;/template&gt;

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

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

<button @click="dialogVisible = true">Show pop-up window</button>
<teleport to="body">
  <div class="dialog" v-if="dialogVisible">
    I'm a pop-up window，I moved directly tobodyUnder the tag  </div>
</teleport>

let obj = {};
let name = 'leo';
(obj, 'name', {
  enumerable: true,   // Enumerable (whether it can be accessed through for...in or ())  configurable: true,   // Configurable (can be deleted with delete, can the properties be set again)  // value: '', // Value of any type, undefined by default  // writable: true, // rewritable  get() {
    return name;
  },
  set(value) {
    name = value;
  }
});

function defineReactive(obj, key, val) {
  // A key one dep  const dep = new Dep()
  // Get the attribute descriptor of the key and find that it is an unconfigurable object and directly return it  const property = (obj, key)
  if (property &&  === false) { return }
  // Get getter and setter and get val value  const getter = property && 
  const setter = property && 
  if((!getter || setter) &&  === 2) { val = obj[key] }
  // Recursive processing to ensure that all keys in the object are observed  let childOb = observe(val)
  (obj, key, {
    enumerable: true,
    configurable: true,
    // get hijacking obj[key] for dependency collection    get: function reactiveGetter() {
      const value = getter ? (obj) : val
      if() {
        // Dependency collection        ()
        if(childOb) {
          // For nested objects, dependency collection          ()
          // Trigger array responsiveness          if((value)) {
            dependArray(value)
          }
        }
      }
    }
    return value
  })
  // set distribute update obj[key]  set: function reactiveSetter(newVal) {
    ...
    if(setter) {
      (obj, newVal)
    } else {
      val = newVal
    }
    // Set the responsive form for new values    childOb = observe(val)
    // Dependency notification update    ()
  }
}

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

function createReactiveObject(target, isReadOnly, baseHandlers, collectionHandlers, proxyMap) {
  ...
  // collectionHandlers: handle Map, Set, WeakMap, WeakSet  // baseHandlers: handle arrays and objects  const proxy = new Proxy(
    target,
    targetType ===  ? collectionHandlers : baseHandlers
  )
  (target, proxy)
  return proxy
}

<div >
  <h1>vue3virtualDOMexplain</h1>
  <p>The weather is really good today</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 virtual DOM explanation, -1 /* HOISTED */))const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(p, null, the weather is really good today, -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 */)
  ]))
}

// patchFlags field type listexport const enum PatchFlags { 
  TEXT = 1,   // Dynamic text content  CLASS = 1 << 1,   // Dynamic class name  STYLE = 1 << 2,   // Dynamic style  PROPS = 1 << 3,   // Dynamic attributes, not including class names and styles  FULL_PROPS = 1 << 4,   // Has a dynamic key attribute. When the key changes, a complete diff comparison is required.  HYDRATE_EVENTS = 1 << 5,   // Node with listening events  STABLE_FRAGMENT = 1 << 6,   // fragment that will not change the order of child nodes  KEYED_FRAGMENT = 1 << 7,   // fragment or part of child nodes with key attribute  UNKEYED_FRAGMENT = 1 << 8,   // The child node does not have a fragment with key  NEED_PATCH = 1 << 9,   // Only non-props comparisons will be performed  DYNAMIC_SLOTS = 1 << 10,   // Dynamic slots  HOISTED = -1,   // Static node, the diff stage ignores its child nodes  BAIL = -2   // means diff should end}

<div >
  <h1>vue3Event Cache Explanation</h1>
  <p>The weather is really good today</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 event cache explanation, -1 /* HOISTED */))const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(p, null, the weather is really good today, -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
  ]))
}

function patchChildren(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  // Get new and old children's nodes  const c1 = n1 && 
  const c2 = 
  const prevShapeFlag = n1 ?  : 0
  const { patchFlag, shapeFlag } = n2
  // Process patchFlag greater than 0  if(patchFlag > 0) {
    if(patchFlag && PatchFlags.KEYED_FRAGMENT) {
      // Existence key      patchKeyedChildren()
      return
    } els if(patchFlag && PatchFlags.UNKEYED_FRAGMENT) {
      // No key      patchUnkeyedChildren()
      return
    }
  }
  // Match is a text node (static): remove old nodes and set text nodes  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 {
    // Match the old and new Vnodes as arrays, then compare them all; otherwise, remove all current nodes    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,...)
      }
    }
  }
}

function patchUnkeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  c1 = c1 || EMPTY_ARR
  c2 = c2 || EMPTY_ARR
  const oldLength = 
  const newLength = 
  const commonLength = (oldLength, newLength)
  let i
  for(i = 0; i < commonLength; i++) {
    // If the new Vnode is already mounted, then clone it directly, otherwise create a new node    const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as Vnode)) : normalizeVnode(c2[i])
    patch()
  }
  if(oldLength > newLength) {
    // Remove excess nodes    unmountedChildren()
  } else {
    // Create a new node    mountChildren()
  }
}

import Vue from 'vue';
(() => {
  // Some things related to DOM});

import { nextTick } from 'vue';   // Explicit importnextTick(() => {
  // Some things related to DOM});

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>
<script>
export default {  data() {    return {      count: 0
    }  },  methods: {    increment() {      ++;    }  },  mounted() {    (`The initial count is ${}.`);  }}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'; 
const count = ref(0); 
function increment() {  ++;} 
onMounted(() => {  (`The initial count is ${}.`);})
</script>