[Diccionario front-end] 5 problemas comunes al usar Vue

Prefacio

Hoy compartiré 5 problemas que también puedes encontrar en el proceso de desarrollo con Vue.

5 problemas comunes al usar Vue

Alias ​​de ruta personalizada

Algunas personas pueden haber notado que esta sintaxis se usa al importar componentes en la plantilla generada por vue-cli:

import Index from '@/components/Index'

¿Que es esto? Más tarde, cuando cambié el archivo de configuración, descubrí que esta era una de las opciones de configuración de webpack: path alias.

También podemos agregar nuestros propios alias de ruta en el archivo de configuración básica. Por ejemplo, establezca ~ como un alias para la ruta src / components:

// build/webpack.base.js

{

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      '~': resolve('src/components')

    }

  }

}

Entonces podemos escribir así al importar componentes:

// import YourComponent from '/src/components/YourComponent'

import YourComponent from '~/YourComponent'

No solo resuelve el problema del camino demasiado largo, sino que también resuelve el problema del camino relativo, ¡que es mucho más conveniente!

Alcance y módulos CSS

Estilo en componente

Generalmente, el estilo de la etiqueta <style> </style> de un componente es global. Cuando se usa una biblioteca de IU de terceros (como Element), es probable que el estilo global afecte el estilo de la biblioteca de IU.

Podemos hacer que el estilo en estilo solo se aplique al componente actual agregando el atributo de ámbito:

<style lang="less" scoped>

  @import 'other.less';

  .title {

    font-size: 1.2rem;

  }

</style>

La importación de otros estilos en la etiqueta de estilo con atributo de ámbito también se limitará al ámbito y se convertirá en el estilo del componente. No se recomienda utilizar estilos con un alto grado de reutilización.

Estilo de importación

　En comparación con el estilo dentro del componente cuando el atributo de ámbito se usa en el estilo, a veces también necesitamos agregar algunos estilos globales. Por supuesto, podemos usar estilo sin atributo de ámbito para escribir estilo global.

Pero en comparación, se recomienda lo siguiente:

/* 单独的全局样式文件 */

/* style-global.less */

body {

  font-size: 10px;

}

.title {

  font-size: 1.4rem;

  font-weight: bolder;

}

Luego importe el estilo global en el archivo de entrada:

// src/main.js

import 'style-global.less'

Consejos para usar v-for

La instrucción v-for es muy poderosa, se puede usar no solo para atravesar matrices, objetos, sino incluso un número o una cadena.

La gramática básica no se explica, aquí hay un pequeño consejo:

Valor de índice

Al usar v-for para generar DOM basado en objetos o matrices, a veces es necesario conocer el índice actual. Podemos hacer esto:

<ul>

  <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}

</ul>

Sin embargo, debe prestar atención al atravesar números. El valor del número comienza desde 1 y la clave comienza desde 0:

<ul>

  <li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }}

</ul>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

Esto apunta al problema en vue

el método no puede usar funciones de flecha

Debido a que la función de flecha está vinculada al contexto del ámbito principal, esto no apuntará a la instancia de Vue como se esperaba.

const App = new Vue({

    el: 'body',

    methods: {

        foo: () => {

            console.log(this) // undefined

        }

    }

})

const App = new Vue({

    el: 'body',

    methods: {

        foo () {

            console.log(this) // Vue instance

        }

    }

})

El método en el método usa el temporizador para usar la función de flecha

Esta dirección en la función de flecha es fija, es decir, la dirección cuando se define la función
y esta dirección en la función ordinaria cambia, es decir, la dirección cuando se usa la función

Código de función de flecha:

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(() => {

      this.goPage(this.nextPage)

      console.log(this)

      //此时的this指向是该vue组件，不管在哪使用，指向都是该vue组件

    }, 1000)

  }

}

El código de la función ordinaria:

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(function () {

      this.goPage(this.nextPage)

      console.log(this)

      //此时的this并不是该vue组件，而是指向window。

    }, 1000)

  }

}

setInterval () y setTimeout () son funciones del objeto de ventana, por lo que apuntará a la ventana

Una plantilla de plantilla solo puede tener un elemento secundario renderizable

Solo puede haber un elemento secundario renderizable bajo una <template>; de lo contrario, se
informará un error de la siguiente manera:

cual es:

    <template>

      <h1>Title</h1>

      <p>Balabala...</p>

      <p>Balabala...</p>

    </template>

    // 应该为

    <template>

      <div>

        <h1>Title</h1>

        <p>Balabala...</p>

        <p>Balabala...</p>

      </div>

    </template>

Al final

Este artículo está sacado de mis notas, parte del contenido ha olvidado la fuente.

Si desea unirse al [gran grupo de intercambio de front-end], siga la cuenta oficial y haga clic en "Comunicación y agregar grupo" para agregar un robot que lo incorpore automáticamente al grupo. Sígueme para recibir los últimos productos secos lo antes posible.