1. What are the main ways to improve the performance of Vue 3.0?

Answer:

• Responsive system upgrade
  • Vue. The core defineProperty of responsive system in JS 2.0x
  • Vue.js 3.0x rewriting responsive system with Proxy object
• Compilation optimization
  • Vue.js 2.0x optimizes the diff process by marking static nodes
  • Vue. Mark and promote all static root nodes in JS 3.0x. When diff, you only need to compare the dynamic content
    • Fragments (upgrade Vuter plug-in)
    • Static lifting
    • Patch flag
    • Cache event handler
• Source volume optimization
  • Vue. Some uncommon API s have been removed from JS 3.0x
    • For example: inline template, etc
  • Tree-shaking
• Vite
  • In the development mode, it can run directly without packaging
  • In development mode, the project must be packaged to run
  • characteristic
    • Quick cold start
    • Compile on demand
    • Module hot update

1. What is the difference between the Composition Api used by Vue 3.0 and the options Api used by Vue 2.0x?

Answer:

• Vue 2.x
  • Contains an object that describes the options of the component (data, methods, props, etc.).
  • Options API develops complex components, and the logic code of the same function will be split into different options
• Vue 3.0
  • A set of function based API s
  • It can organize the logic of components more flexibly

1. Proxy compared to objct What are the advantages of defining proerty?

Answer:
Advantages of Proxy

• You can listen directly to objects rather than properties
• You can directly monitor the changes of the array
• There are many ways to intercept
• Proxy returns a new object. You can only operate on the new object to achieve the purpose, but object Defineproperty can only traverse object properties and modify them directly
  Object. Advantages of defineproperty:
• The compatibility number supports IE9, while the Proxy has browser compatibility problems and cannot be smoothed with polyfill. Therefore, the author of Vue declared that it needs to wait until the next major version (3.0) to be rewritten with Proxy

1. What are Vue 3.0 compiler optimizations?

Answer:

• Static promotion: promote the static node until it is recompiled, and do not update it
• Fragments (upgrade Vuter plug-in)
• Statically bound class and id will not be updated
• Update analysis (dynamic binding) in combination with packaged Hint
• Event listener Cache handles
• Optimization for static nodes: Virtual DOM mechanism adjusts memory optimization, less occupation, loading on demand and more flexible componentization.

1. Vue. Implementation principle of JS 3.0 response system?

Vue3 rewrites the responsive system with Proxy objects. This system is mainly composed of the following functions
1,reactive:

• Receive a parameter and judge whether the parameter is an object. If it is not an object, this parameter will be returned directly without reactive processing
• Create interceptor object handler and set get/set/deleteProperty
  • get
    • Collect dependencies (track)
    • Returns the value of the current key.
      • If the value of the current key is an object, create an interceptor handler for the object of the current key and set get/set/deleteProperty
      • If the value of the current key is not an object, the value of the current key is returned
  • set
    • When the new value set is not equal to the old value, it will be updated to the new value and trigger the update (trigger)
    • deleteProperty
      • When the current object has this key, delete the key and trigger an update (trigger)
        2. effect: receive a function as an argument. The function is to collect dependencies when accessing responsive object properties
        3,track:
• Receive two parameters: target and key
• If there is no activeEffect, the effect dependency is not created
• If there is an active effect, it is used to judge whether there is a target attribute in the WeakMap set
  • If there is no target attribute in the WeakMap set, set(target,(depsMap = new Map()))
  • If there is a target attribute in the WeakMap set, judge whether there is a key attribute in the despMap of the map value of the target attribute
    • If there is no key attribute in depsMap, set(key, (dep = new Set()))
    • If there is a key attribute in depsMap, add this activeEffect
      4,tigger:
• Judge whether there is target attribute in WeakMap
  • If there is no target attribute in the WeakMap, there is no corresponding dependency on the target
  • If there is a target attribute in the WeakMap, judge whether the map value of the target attribute has a key attribute. If so, cycle to trigger the collected effect()
    The specific codes are as follows:

const isObject = val => val !== null && typeof val === 'object'
const convert = raw => isObject(raw) ? reactive(raw) : raw
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (target, key) => hasOwnProperty(target, key)

export function reactive (target) {
  // Judge whether the incoming is an object, not a direct return
  if( !isObject(target) ) return target
  // Calling the handler function
  const handler = {
    get (target, key, receiver) {
      // Collection dependency
      track( target, key)
      const result = Reflect.get(target, key, receiver)
      return result
    },
    set (target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      // Judge whether the new value is equal to the old value
      let result = true
      if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver)
        // Trigger update
        trigger(target, key)
      }
      return result
    },
    deleteProperty (target, key) {
      // Judge whether there is a key attribute in the target
      const hasKey = hasOwn(target, key)
      // If there is this attribute, and the deletion is successful, the update will be triggered
      const result = Reflect.deleteProperty(target, key)
      if (hasKey && result) {
        // Trigger update
        trigger(target, key)
      }
      return result
    }
  }

  return new Proxy(target, handler)
}

let activeEffect = null
export function effect (callback) {
  // Cache callback function
  activeEffect = callback
  callback() // Access responsive object properties and collect dependencies
  activeEffect = null
}

let targetMap = new WeakMap()

export function track (target, key) {
  // If there is no active effect, the function returns
  if (!activeEffect) return 
  // If depsMap is not set for targetMap
  let depsMap = targetMap.get(target)
  if ( !depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  // If dep is not set for depsMap
  let dep = depsMap.get(key)
  if ( !dep ) {
    depsMap.set(key, (dep = new Set()))
  }
  // Finally, add the active effect function to dep
  dep.add(activeEffect)
}

export function trigger(target, key) {
  const depMap = targetMap.get(target)
  if ( !depMap ) return
  const dep = depMap.get(key)
  if ( dep ) {
    dep.forEach(effect => {
      effect()
    })
  }
}

export function ref (raw) {
  // Judge whether raw is an object created by ref, and if so, return it directly
  if ( isObject(raw) && raw.__v_isRef ) {
    return
  }
  // If raw is an object, call reactive creation, otherwise return this value
  let value = convert( raw )
  const r ={
    __v_isRef: true,
    get value () {
      track(r, 'value')
      return value
    },
    set value (newValue) {
      if ( newValue !== value ) {
        raw = newValue
        value = convert(raw)
        trigger(r, 'value')
      }
    }
  }
  return r
}

export function toRefs (proxy) {
  // Determine whether the current incoming object or array initialization is null
  const ret = proxy instanceof Array ? new Array(proxy.length) : {}
  // Traverse the proxy and assign its internal responsive attribute to the initialization attribute
  for(const key in proxy ) {
    ret[key] = toProxyRef(proxy, key)
  }
  return ret
}

function toProxyRef (proxy, key) {
  const r = {
    __v_isRef: true,
    get value () {
      return proxy[key]
    },
    set value (newValue) {
      return proxy[key] = newValue
    }
  }
  return r
}

export function computed (getter) {
  const result = ref()

  effect(() => (result.value = getter()))

  return result
}