Selección de vue master

Preguntas de la entrevista de VUE

La diferencia entre v-show y v-if
Método de clase vinculante dinámicamente
La diferencia entre los atributos calculados y el reloj.
Cómo comprender el flujo de datos unidireccional
mantener viva
¿Cómo se implementa el modelo V sintáctico de Sugar para componentes personalizados?
ciclo vital
Comunicación de componentes
Salto de ruta
¿Qué tipo de ganchos de navegación tiene vue-router?
Principio de enlace bidireccional de Vue.js 2.x
¿Qué es MVVM y cuál es la diferencia con MVC?
vuex
esto. $ nextTick ()
El principio de vue
Comprender la función Render en Vue
espacio

La diferencia entre v-show y v-if

La diferencia entre v-hsow y v-if:
v-show es el cambio de CSS, v-if es la destrucción completa y la recreación.
Use
v-show para cambios frecuentes, v-if para menos cambios durante el tiempo de ejecución
v-if = 'false' v-if es renderizado condicional, no se renderizará cuando sea falso

Uso de matriz de clase vinculada

Método de objeto v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
Método de matrizv-bind:class="[class1, class2]"
En línea v-bind:style="{color: color, fontSize: fontSize+'px' }"

La diferencia entre los atributos calculados y el reloj.

El cálculo de atributos monitorea automáticamente los cambios en los valores dependientes, por lo que devuelve contenido dinámicamente. El monitoreo es un proceso. Cuando el valor monitoreado cambia, se puede activar una devolución de llamada y se pueden hacer algunas cosas.
Entonces, la diferencia proviene del uso, solo necesita un valor dinámico, luego use el atributo calculado; necesita conocer el cambio de valor y ejecutar la lógica comercial antes de usar el reloj. Aunque es factible usar el uso inverso o mixto, es un uso incorrecto.
Decir la diferencia agregará puntos. Cuando se
calcula es un objeto, ¿qué opciones tiene?
¿Cuál es la diferencia entre calculado y métodos?
¿Pueden los cálculos basarse en datos de otros componentes?
Cuando el reloj es un objeto, ¿qué opciones tiene?

Hay dos opciones: obtener y configurar
Los métodos son un método que puede aceptar parámetros, pero los calculados no. Los calculados se pueden almacenar en caché, pero los métodos no.
Computado puede depender de otros datos computados, incluso de otros componentes
Observe el
controlador de configuración en
profundidad si la
immeditación profunda se ejecuta de inmediato.

para resumir

Cuando algunos datos necesitan cambiar con otros datos, se recomienda usar computed.
Cuando hay una respuesta general a los cambios en los datos, se recomienda utilizar Watcher al realizar alguna lógica empresarial u operaciones asincrónicas.

Modificador de eventos

Enlazar un evento de clic nativo, agregar nativo,
Otros modificadores de eventos

dejar de prevenir uno mismo

Combinación de teclas

click.ctrl.exact solo se activa cuando se presiona ctrl

¿Por qué los datos del componente son una función?

¿Por qué los datos en el componente deben ser una función y luego devolver un objeto, mientras que en la nueva instancia de Vue, los datos pueden ser un objeto directamente?

Debido a que los componentes se usan para su reutilización, se hace referencia a los objetos en JS, por lo que el alcance no está aislado y las nuevas instancias de Vue no se reutilizarán, por lo que no hay problema de referenciar objetos.

mantener viva

https: //cn.vuejs.org/v2/guide ...

¿Cómo se implementa el modelo V sintáctico de Sugar para componentes personalizados?

https: //www.cnblogs.com/attac ...
Según la documentación oficial, v-model es esencialmente azúcar sintáctico, es decir, después de usar v-model para vincular datos, en realidad vincula los datos y agrega otro evento de entrada seguimiento, de la siguiente manera:

Cómo comprender el flujo de datos unidireccional

Este concepto aparece en la comunicación de componentes. El componente principal pasa datos al componente secundario a través de prop, pero este accesorio solo puede ser modificado por el componente principal y el componente secundario no se puede modificar; de lo contrario, se informará un error. Cuando un componente hijo quiere modificar, solo puede enviar un evento personalizado a través de $ emit. Una vez que el componente padre lo recibe, el componente padre puede modificarlo.
En términos generales, para escenarios en los que el componente secundario quiere cambiar el estado del componente principal, hay dos soluciones:
copiar un accesorio en los datos del componente secundario. Los datos se pueden modificar, pero el accesorio no:

export default {
  props: {
    value: String
  },
  data () {
    return {
      currentValue: this.value
    }
  }
}

Si se trata de una conversión de valores de prop, puede utilizar propiedades calculadas:

export default {
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase();
    }
  }
}

ciclo vital

BeforeCreate / creado antes y después de la creación

En la fase beforeCreate, el elemento montado el y los datos del objeto de datos de la instancia de vue están indefinidos y no se han inicializado. En la fase de creación, el objeto de datos de la instancia de vue está allí, pero el el aún no lo está.

BeforeMount / montado antes y después de la carga

En la fase beforeMount, se inicializan $ el y los datos de la instancia de vue, pero el nodo DOM que no se ha virtualizado antes todavía está montado y los datos no se han reemplazado.
En la etapa montada, se monta la instancia de vue y los datos se procesan correctamente.

BeforeUpdate / actualizado

Cuando los datos cambian, se activan los métodos beforeUpdate y updated. Estos dos no se usan comúnmente y no se recomiendan.

Before Destory / Destoryed antes y después de la destrucción

beforeDestory se activa antes de la destrucción de la instancia de vue. Generalmente, el evento enlazado manualmente se elimina a través de removeEventListener. La destrucción se activa después de que se destruye la instancia.

Comunicación entre componentes

父子 props / event parent / parent / children ref proporcionar / inyectar
Hermano bus vuex
跨级 bus vuex provide.inject

Método de salto de ruta

Generalmente hay dos

<router-link to='home'> router-linkLa etiqueta se representará como una <a>etiqueta y los saltos en la plantilla son todos así;
La otra es que la programación es navegación, es decir, saltar a través de js. Por ejemplo router.push('/home')

Principio de enlace bidireccional de Vue.js 2.x

Esta pregunta es casi imprescindible en la entrevista y la respuesta es variada. Básicamente, debe saber que la API principal Object.defineProperty() secuestra cada atributo setter / getter, publica un mensaje a los suscriptores cuando cambian los datos y activa la devolución de llamada del oyente correspondiente. Es por eso que Vue.js 2.x no es compatible con IE8 (IE 8 no es compatible con Esta API, y no se puede lograr a través de polyfill).
https: //cn.vuejs.org/v2/guide ...

¿Qué es MVVM y cuál es la diferencia con MVC?

http: //www.ruanyifeng.com/blo ...

nextTick ()

La devolución de llamada retrasada se ejecuta después de que finaliza el siguiente ciclo de actualización del DOM. Después de modificar los datos, use inmediatamente esta función de devolución de llamada para obtener el DOM actualizado.

// 修改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
  // DOM 更新
})

El principio de vue

https: //segmentfault.com/a/11 ...

El modo de Vue es el modo mv-vm, es decir, ( model-view-modelView), que usa modelView como capa intermedia (es decir, una instancia de vm) para vincular y cambiar datos bidireccionales.

Al establecer un árbol de dom virtual document.createDocumentFragment(), el método crea un árbol de dom virtual.
Una vez que los datos monitoreados cambian, los datos serán Object.definePropertyinterceptados a través de la interceptación de datos definida.
Los cambios de datos interceptados se activan Watcher(observadores) a través del modelo de editor de suscripción , cambiando así los datos específicos en el dom virtual.
Finalmente, al actualizar el valor del elemento del dom virtual, el valor del último árbol de dom renderizado se cambia para completar el enlace bidireccional.

Implementación de enlace bidireccional

object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：Object.defineProperty(obj, prop, descriptor)

var obj = {};
Object.defineProperty(obj,'hello',{
  get:function(){
    //我们在这里拦截到了数据
    console.log("get方法被调用");
  },
  set:function(newValue){
    //改变数据的值，拦截下来额
    console.log("set方法被调用");
  }
});
obj.hello//输出为“get方法被调用”，输出了值。
obj.hello = 'new Hello';//输出为set方法被调用，修改了新值

Podemos hacer un enlace de datos bidireccional:

var obj = {};
Object.defineProperty(obj,'hello',{
  get:function(){
    //我们在这里拦截到了数据
    console.log("get方法被调用");
  },
  set:function(newValue){
    //改变数据的值，拦截下来额
    console.log("set方法被调用");
    document.getElementById('test').value = newValue;
    document.getElementById('test1').innerHTML = newValue;
  }
});
//obj.hello;
//obj.hello = '123';
document.getElementById('test').addEventListener('input',function(e){
  obj.hello = e.target.value;//触发它的set方法
})

Comprender la función Render en Vue

https: //www.cnblogs.com/tugen ...

VUE generalmente usa plantillas para crear HTML y, a veces, necesitamos usar javascript para crear HTML, en este momento necesitamos usar la función de render.

La función render devuelve un elemento hijo en el componente createElement y se almacena en la columna real del componente $slots.default .

return createElement('h1', this.title); La createElementinformación devuelta le dirá a la página VUE qué tipo de nodo y sus nodos secundarios necesitan ser renderizados. A dicho nodo lo llamamos DOM virtual, que puede abreviarse como VNode.

parámetros de createElement

{String | Object | Function}

Una cadena de etiqueta HTML, un objeto de opción de componente o una función cuyo tipo de valor de retorno es Cadena / Objeto. Este parámetro es obligatorio

Nodo hijo

Nodo hijo, opcional, cadena o matriz

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 由子节点构成的数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

espacio

https: //www.jianshu.com/p/316 ...

https: //vue.docschina.org/v2 / ...

Ranura única

Cuando la plantilla del componente secundario tiene solo un espacio sin atributos, todo el fragmento de contenido pasado por el componente principal se insertará en la posición DOM donde se encuentra el espacio y se reemplazará la etiqueta del espacio en sí.

Cualquier contenido originalmente en la etiqueta <slot> se considera contenido alternativo. El contenido alternativo se compila dentro del alcance del componente secundario, y el contenido alternativo se muestra solo cuando el elemento anfitrión está vacío y no hay contenido para insertar.

Tragamonedas con nombre

El elemento solt puede usar un nombre de función especial para configurar aún más cómo distribuir el contenido. Varias ranuras pueden tener diferentes nombres.
De esta manera, la posición de la ranura en la plantilla del componente principal se puede asociar con el elemento de la ranura del componente secundario para facilitar la transmisión correspondiente del contenido de la ranura.

Ranuras con alcance

La ranura reutilizable que se puede acceder a los datos internos de la componente es
en la matriz. slot-scope El <template> elemento con características especiales debe existir, lo que indica que es una plantilla para la ranura de alcance. El valor de slot-scope se utilizará como un nombre de variable temporal, que recibe el objeto prop pasado del componente hijo.