Preguntas frecuentes sobre entrevistadores de vue 2

1. Describe brevemente el primer proceso de renderizado de Vue.

• Primero, inicialice Vue, inicialice los miembros de instancia y los miembros estáticos de Vue
• Después de la inicialización, se define el constructor y se llama al método this._init (options)
• Llame a esto. $ Mount () en _init ()
  • Nota: La función principal de $ mount () es ayudarnos a compilar la plantilla en la función de renderizado, pero primero determinará si la opción de renderizado se ha pasado actualmente. Si no se ha pasado, obtendrá nuestra opción de plantilla, si la opción de plantilla Si no, usará el contenido en el como nuestra plantilla, y luego compilará la plantilla en una función de render. Utiliza la función compileToFunctions () para ayudarnos a compilar la plantilla en una función de render. Cuando la función de render está compilado, montará la función de renderizado en options.render
• La siguiente llamada a mountComponent () determinará primero la opción de renderizado. Si no hay una opción de renderizado, pero hemos pasado la plantilla y el entorno de desarrollo actual es un entorno de desarrollo, se enviará una advertencia. El propósito es si estamos actualmente usando la versión en tiempo de ejecución de Vue, y no se pasa ningún renderizado, pero se pasa la plantilla, lo que nos dice que la versión en tiempo de ejecución no es compatible con el compilador. A continuación, se activará la función de gancho en el ciclo de vida beforeMount (antes de iniciar el montaje)
• Luego se llama a updateComponent (). En esta función, se llaman a vm._render y vm._update. La función de vm._render es generar un DOM virtual, y la función de vm._update es convertir el DOM virtual en un DOM real. DOM y móntelo en En la página (puede verlo en la página)
• A continuación, cree el objeto Watcher. Al crear el Watcher, pase la función updateComponent, que finalmente se llama dentro del Watcher. El método get se usa dentro del Watcher. Cuando se crea el Watcher, se activará la función de gancho montado en el ciclo de vida. En el método get, se llamará updateComponent ()
• Después del montaje, regrese a la instancia de Vue

2. Describa brevemente el principio de capacidad de respuesta de Vue.

• Responsive se refiere a que cuando sus datos cambian, Vue puede responder y volver a renderizar la página. Utiliza el secuestro de datos, combinado con el modelo editor-suscriptor, y secuestra cada propiedad a través de Object.defineProperty () Setter, getter, publica mensajes para suscriptores cuando los datos cambian y activa la devolución de llamada de monitoreo de respuesta

• La respuesta en vue3.0 es usar el método Proxy en es6. Este método no necesita recorrer cada atributo de datos y realizar un proceso de respuesta para cada atributo. En su lugar, utiliza directamente el objeto de datos completo, interceptando los métodos get y set de todos los atributos contenidos en este objeto.

  • beneficio:
  • 1. Cuando agregamos dinámicamente un atributo a los datos, sin ningún procesamiento, este atributo ya responde.
  • 2. Cualquier operación en la matriz también puede desencadenar una respuesta.

3. Describa brevemente la función y los beneficios de Key en el DOM virtual.

• Función:
  Puede rastrear cada nodo y, al comparar, reorganizará el orden de los elementos según el cambio del valor de la clave. De esta forma, los elementos existentes se reutilizan y reordenan, y se eliminan los elementos cuyas claves no existen. Es conveniente que vnode encuentre el nodo correspondiente en el proceso de diferencias y luego lo reutilice.

• Beneficios:
  Puede reducir el funcionamiento de dom, reducir el tiempo necesario para la diferencia y el renderizado y mejorar el rendimiento.

  Al crear dom virtual en vue2.0, los espacios y saltos de línea también se convertirán en un solo dom virtual, por lo que los hábitos de código también son muy importantes (afectando el rendimiento). En
  vue3.0, el algoritmo de dom virtual está optimizado para eliminar espacios, saltos de línea, etc. El dom virtual inútil creado mejora aún más el rendimiento

4. Describe brevemente el proceso de compilación de plantillas en Vue.

1.缓存公共的mount函数，并重写浏览器平台的mount

2.判断是否传入了render函数，没有的话，是否传入了template，没有的话，则获取el节点作为template

3.调用baseCompile函数

4.解析器(parse)将模板字符串的模板编译转换成 AST 抽象语法树

5.优化器(optimize)-对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化

6.通过generate将AST抽象语法树转换为render函数的js字符串

7. 将render函数通过createFunction函数转换为一个可以执行的函数将render函数挂载到options中

8.执行公共的mount函数