1. Prioridad de v-for y v-if

Obviamente, v-for se analiza antes de vi (el código fuente se indica claramente)
Si ocurre al mismo tiempo, cada renderizado ejecutará el bucle primero y luego juzgará la condición. En cualquier caso, el bucle es inevitable, lo que desperdicia el rendimiento.
Para evitar esta situación, anide la plantilla en la capa exterior, realice el juicio v-if en esta capa y luego realice el bucle v-for dentro

2. Pasar valores entre componentes

Tres formas de transmitir valores de componentes

2.1.1 El componente padre pasa valores al componente hijo

1. Vinculación de propiedades dinámicas cuando el componente principal llama al componente secundario <v-header :title="title"></v-header>
2. Hay accesorios en el componente secundario para recibir los datos transmitidos por el componente principal.
3. Puede pasar atributos, métodos, instancias y utilizarlos directamente en subcomponentes.

2.1.2 El componente hijo obtiene activamente las propiedades y métodos del componente padre

Los subcomponentes pasan directamentethis.$parent.数据``this.$parent.方法

2. 2 componentes secundarios pasan valores al componente principal

2.2.1 El componente padre obtiene activamente los datos y métodos del componente hijo

Definir una referencia al llamar a componentes secundarios <v-header ref="header"></v-header>
Pase el componente principal this.$refs.header.属性 this.$refs.header.方法

2.2.2 El evento personalizado del componente secundario pasa el valor al componente principal

Subconjunto:

this. $emit("自定义事件名称" ,要传的数据) ;

Componente padre:

<Header @childInput= ' getVal '></Header>
methods:{
    
    
getVal(msg){
    
    
/ /msg就是，
子组件传递的数据
}
}

Subconjunto

<template>
  <div>
   父组件传递过来的: {
    
    {
    
    this.$parent.msg}}
            <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>

<script>
  export default {
    
    
    props:{
    
    
      msg:String
    },
    data () {
    
    
      return {
    
    
        childValue:"我是一个子组件的值"
      }
    },
    methods: {
    
    
      childClick () {
    
    
        this.$emit('childClick',this.childValue)
      }
    }
  }
</script>

Componente padre

<template>
  <div>
    我的名字是
    <!-- 子组件 -->
    <!-- <child :msg="name"></child> -->
     <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
     <!-- 点击子组件按钮,将子组件的数据显示在父组件上 -->
     <!-- 自定义事件的名称要与子组件$emit的一致 -->
    <child @childClick="childByValue"></child>
    
    {
    
    {
    
    name}}

  </div>
</template>

<script>
import Child from './Child'
  export default {
    
    
    data() {
    
    
      return {
    
    
        name:"pz",
        msg:"父组件数据"
      }
    },
    components: {
    
    
      child:Child
    },
    methods: {
    
    
      childByValue(childValue) {
    
    
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

2.3 Valor que pasa entre componentes hermanos

(Para transferir valores entre componentes secundarios y no principales, debe definir un archivo de instancia público público bus.js, que sirve como un almacén intermedio para transferir valores; de lo contrario, el efecto de transferir valores entre componentes de enrutamiento no se lograr.)
bus.js público

import Vue from 'vue'
export default new Vue()

Componente A:

<template>
  <div>
    A组件:
    <span>{
    
    {
    
    elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    
    
    data () {
    
    
      return {
    
    
        elementValue: 4
      }
    },
    methods: {
    
    
      elementByValue: function () {
    
    
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

Componente B:

<template>
      <div>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{
    
    {
    
    name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
    
    
        data () {
    
    
          return {
    
    
            name: 0
          }
        },
        mounted: function () {
    
    
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => {
    
    
            console.log(data)
            vm.name = data
          })
        },
        methods: {
    
    
          getData: function () {
    
    
            this.name++
          }
        }
      }
    </script>

3. El papel de la clave

Función: Siempre que se actualice el
algoritmo de diferencia de dom virtual de manera más eficiente.
Si el tipo de nodo es diferente, el dom virtual matará directamente todos los nodos anteriores, luego creará e insertará un nuevo nodo, y no comparará los nodos después este nodo.
Si el tipo de nodo es el mismo, se reiniciarán los atributos del nodo para lograr la actualización del nodo. El
uso de la clave le dará a cada nodo como una identificación, y el algoritmo diff podrá identificar correctamente el nodo y encontrar un nueva posición para insertar el nodo.

4. La diferencia entre v-if v-show

v-if es una representación condicional "real", porque asegurará que los detectores de eventos y los subcomponentes en el bloque condicional se destruyan y reconstruyan correctamente durante el proceso de conmutación.
v-if también es perezoso: si la condición es falsa en la representación inicial, no se hará nada hasta que la condición se vuelva verdadera por primera vez, y luego se generará el bloque condicional.
Por el contrario, v-show es mucho más simple: no importa cuál sea la condición inicial, el elemento siempre se renderizará y simplemente se cambiará en función de CSS.
En términos generales, v-if tiene una sobrecarga de conmutación más alta, mientras que v-show tiene una sobrecarga de renderización inicial más alta. Por lo tanto, si necesita cambiar con mucha frecuencia, v-show es mejor; si es poco probable que las condiciones cambien durante el tiempo de ejecución, v-if es mejor.

5. Cómo hacer que CSS solo funcione en el componente actual

<style scope> </style>
Extensión: ¿Cómo cambiar el estilo de introducción de componentes de terceros? Por ejemplo, cuando se introduce swiper, es necesario cambiar el estilo de los puntos de paginación. Demostración del uso de la penetración de estilo sass: elemento principal / elemento profundo / secundario

<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
    
    
  background:red;
}
</style>

6. Resuelva el problema de la demora de 300 ms en el procesamiento del tiempo del terminal móvil

Descargar
npm install fastclick
引入
importar FastClick desde 'fastclick'
FastClick。attach (documento. Cuerpo);

7. Propósito de vue-loader

vue-loader es un cargador de archivos, que se reemplaza con template / js / style en un módulo js
Propósito: js puede escribir es6 css puede usar menos sass

8. ¿Qué hace NextTick?

Descripción:
$ nextTick es ejecutar una devolución de llamada retrasada después de que finalice el siguiente ciclo de actualización del DOM. Después de modificar la función, use $ nextTick para obtener la
escena DOM actualizada en la devolución de llamada : opere según la nueva vista después de que se actualice la vista

9. ¿Por qué los datos de los andamios devuelven una función?

Debido a las características de JS en sí, si los datos son un objeto, debido a que el objeto en sí es un tipo de referencia, cuando modificamos uno de sus atributos, afectará los datos de todas las instancias de Vue. Si los datos se devuelven como una función a un objeto, los atributos de datos de cada instancia son independientes y no se afectarán entre sí.

10. Comprensión de Keep-Alive

Definición: Es un componente incorporado. Puede guardar el estado de transición en la memoria durante el proceso de cambio de componentes para evitar la repetición del dominio. La
descripción no se mostrará en el árbol de dom.

11. La diferencia entre reloj y calculado

El atributo calculado es el valor conocido en los datos para obtener un nuevo valor, el rendimiento no es bueno y los cambios de otros te afectan (pasivo)
Watch monitorea los datos en los datos, monitorea los cambios de enrutamiento, mis cambios afectan a otros (activamente), puede obtener el nuevo valor y el valor anterior

Resumen de los puntos de conocimiento de la entrevista vue