Resumen de las preguntas prácticas de la entrevista relacionadas con el proyecto Shangpinhui VUE

Directorio de artículos

1. ¿Cuál es la diferencia entre v-show y v-if?

v-show: control a través de la visualización de estilo
v-if: operar mediante la manipulación de elementos DOM

2. A la hora de desarrollar un proyecto, ¿cuáles son los métodos de optimización?

1: v-show|v-if (El componente de pie de página está presente en la parte inferior de la página de inicio|búsqueda, pero no hay ningún componente de pie de página en el inicio de sesión y el registro. El componente de pie de página se muestra|oculto, seleccione v-show|v-
if )
2: carga bajo demanda (para el complemento loadsh, elemento que encapsula muchas funciones)
3. Función antivibración y aceleración
4. Solicita optimización del rendimiento:

Optimización de datos de solicitud
Para enviar una solicitud, es necesario llevar parámetros al servidor: con 100 parámetros y 1 parámetro [Consumo de banda ancha]
Para los parámetros llevados al servidor: si el valor es indefinido, al enviar una solicitud al servidor, el los parámetros no se llevan al servidor
Optimización del número de solicitudes:
1. ¿Optimización del rendimiento de la vinculación de tres niveles de TypeNav?
- Proyecto: cambiar a inicio para buscar o buscar a inicio, encontrará una cosa, el componente envía con frecuencia solicitudes al servidor para obtener vinculación de tres niveles datos para mostrar.
- Si el proyecto envía solicitudes al servidor con frecuencia, el rendimiento es muy bueno, por lo que debemos optimizarlo.
2. ¿Por qué envían con frecuencia solicitudes al servidor para obtener los datos del enlace de tres niveles?
- Los datos del enlace de tres niveles son un componente global, y se dan saltos en los componentes utilizados, porque cuando salta el enrutamiento , los componentes serán destruidos [home Creado del componente: acción de despacho a vuex, por lo que los datos del enlace de tres niveles se obtienen con frecuencia] - Solo se requiere una
solicitud para obtener los datos del enlace de tres niveles, y no no hay necesidad de varias veces.
- Solución final: moutend en la aplicación solo se ejecutará una vez

APP文件
  mounted(){
    
    
    // TypeNav向仓库派发行为 获取数据
    // 放到这里，只需进行一次请求，Home小仓库获得数据后，全局组件TypeNav都会存储到Home小仓库获得的这个数据
    this.$store.dispatch("categroylist");
  },

Aunque main también se ejecuta una vez, no es un componente, sin esto, el componente tiene el atributo $store

3. Enrutamiento pase parámetros primeras preguntas de entrevista de cierre

 1:路由传递参数（对象写法）path是否可以结合params参数一起使用?
 不可以：不能这样书写，程序会崩掉
 2:如何指定params参数可传可不传?
 3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
 4:如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
 5: 路由组件能不能传递props数据?

4. Embalaje secundario Axios

beneficio:

Administración unificada de API, sin importar cuántas interfaces haya, todas las interfaces pueden ser muy claras y fáciles de mantener.

// 这个文件进行统一的API管理
// 引入axios
import requests from './request'
// 引入mockAjax
import mockrequest from './mockAjax'


// 三级联动的接口
// 这里设置一个函数对外暴露，外面若需要发起三级联动的数据请求调用即可 记住要给函数返回，不然无返回值默认undefined
export const reqCategoryList = ()=>{
    
    
    // 发请求成功返回的是promise对象  直接使用封装好的axios
    return requests({
    
    
        url:'/product/getBaseCategoryList',
        method:'get'
    })

}

// 获取首页banner（首页轮播图的数据）
export const reqGetBannerList = ()=>mockrequest.get('/banner')
    
//获取floor的数据
export const reqGetFloor = ()=>mockrequest.get('/floor')

// 获取search的数据   这个函数需要不需要外部传递的参数？要给服务器带参进行params给服务器传递参数 调这个函数得有相应的参数     错错错需要接收home页传递过来的params数据和query数据/api/list
// 当前这个接口。给服务器发请求的时候，至少得是一个空对象
export const reqGetSearchInfo = (params)=>requests({
    
    
    url:'/list',
    method:'post',
    data:params
})

Interceptor de solicitudes e interceptor de respuestas
barra de progreso nprogress

// 这里进行axios的二次封装
// 主要想用请求拦截器和响应拦截器
import axios from 'axios'
// 引入进度条 start开始 end结束
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"

// 1.利用axios的create方法创建一个axios实例
// 2.request其实就是axios，只不过我们又进行了配置和封装
const requests = axios.create({
    
    
    // create里面可以传配置对象

    // 配置对象
    // 基础路径：baseURL就是给每个请求的路径上自动加上所配置的，就不用自己再去书写
    baseURL: '/api',
    // 请求超时的时间
    timeout: 5000
})

// 3.设置请求拦截器，在发请求之前，请求拦截器可以监测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    
    
    // config其实是一个配置对象，里面有属性headers请求头

    // 进度条开始
    nprogress.start()
    return config
});

//4.设置响应拦截器，里面传入成功的回调和失败的回调
requests.interceptors.response.use((response)=>{
    
    
    // 成功的回调函数，服务器在响应数据成功的时候，响应拦截器可以检测得到，做一些事情
    // 进度条结束
    nprogress.done()

    // 返回data字段  
    return response.data
},(error)=>{
    
    
    // 服务器响应失败回调函数
    // 终结promise
    return Promise.reject(new Error('false'))
})
// 对外暴露
export default requests

5. Función de preguntas de la entrevista anti-vibración y estrangulamiento

Normal: el evento se activa con mucha frecuencia, y cada vez que se activa, se debe ejecutar la función de devolución de llamada (si el tiempo es corto y hay un cálculo dentro de la función de devolución de llamada, entonces el navegador puede congelarse)

Anti-vibración: Todos los disparadores anteriores se cancelan, y la última ejecución se disparará después del tiempo especificado, es decir, si los disparadores se disparan de forma continua y rápida, solo se ejecutará el último.

 <button>点击</button>
    <script>
        // 防抖
        const btn = document.querySelector('button')
        // 事件处理函数
        function pay() {
    
    
            console.log("已经购买");
            // 没有处理过就是指向window 正常是button
            console.log(this);
        }
        // 防抖函数
        function debounce(func, delay) {
    
     
            // 3.只创建了一次，是唯一的只不过不断的给timer赋值进行延时而已
            // 每个清除延时就是清除上一个定义的延时，而不是清除新建立的延时
        let timer
            // 因为要在防抖函数里面执行原来的事件处理函数，所以要接收参数来接收,并且去执行这个函数的参数（事件处理函数）
            // 1.一旦监听到了函数就会马上执行，因为要进行处理，使用高阶函数(函数返回函数)
            return function () {
    
    
                // 因为在防抖函数里面的定时器里面的this是指向全局变量window的所以要提前保存this
                let This = this
                let arg= arguments
                //    这里虽然提前声明且清除函数调用函数了，但是每个防抖函数都是独立的没有相互联系，因此要使用作用域链（闭包）将声明放在外面
                // let timer
                // 设置清除延时
                // 2.不能清除一个没有定义的变量名，因此将变量名提前声明
                clearTimeout(timer)
                timer = setTimeout(function () {
    
    
                    // 通过call方法进行绑定这个this给
                    // func.call(This)
                    // 因为后续可能给事件处理函数传参因此使用apply
                    func.apply(This,arg)
                }, delay)
            }
        }
        btn.addEventListener('click', debounce(pay, 1000))
        // 节流
    </script>

Limitación: la devolución de llamada no se activará repetidamente dentro del intervalo de tiempo de intervalo especificado, y la devolución de llamada solo se activará si el intervalo de tiempo es mayor que este intervalo de tiempo, convirtiendo las activaciones frecuentes en una pequeña cantidad de activaciones

 <script>
        const btn = document.querySelector('button')
        function pay() {
    
    
            console.log("已经购买");
            console.log(this);
        }
        // 节流函数
        function throtte(func, delay) {
    
    
            // 节流核心是如果timer被赋值了（有定时在就不进行操作，如果没有赋值就执行任务）
            let timer
            return function () {
    
    
                let This = this
                let arg= arguments
                if(timer){
    
    
                    return;
                }
                timer = setTimeout(function () {
    
    
                    func.apply(This,arg)
                    // 等时间过去，不用清除定时，直接情况timer的值即可
                    // 因为这个清空是在延迟执行任务以后发生
                    timer = null
                }, delay)
            }
        }
        btn.addEventListener('click', throtte(pay, 1000))
    </script>
    方法二
     <script>
         const btn = document.querySelector('button')
        function pay() {
    
    
            console.log("已经购买");
            console.log(this);
        }
        // 节流函数
        function throtte(func, delay) {
    
    
            // 节流核心是如果timer被赋值了（有定时在就不进行操作，如果没有赋值就执行任务）
            let pre = 0;
            return function () {
    
    
                let This = this
                let arg= arguments
                let now = new Date()
              if(now - pre>dalay){
    
    
                fun.apply(This.arg);
                pre = now;
              }
            }
        }
        btn.addEventListener('click', throtte(pay, 1000))
    </script>

6. Salto de enrutamiento y paso de parámetros.

1. El primer tipo de navegación declarativa: ¿Por qué hay un retraso al usar el componente de enlace de enrutador?
router-link es un componente: es equivalente a un objeto de instancia de la clase VueComponent Hay muchas instancias (más de 1000) del nuevo VueComponent en un instante
, lo que consume mucha memoria y provoca un bloqueo.
{ { c1. nombre de categoría }}

2. La segunda navegación programática: push|replace

La clasificación de tres niveles utiliza la navegación programática porque se congelará al usar el enlace del enrutador.
Debido a que hay muchas cascadas, obtenidas por el bucle v-for, durante el proceso del bucle, la función de devolución de llamada también se optimizará a su vez
: el principio burbujeante de navegación programática + delegación de eventos vinculará una función de devolución de llamada, y será correspondiente asignado a cada nodo secundario

Cuando el enrutamiento salta [inicio->buscar]: es necesario pasar los parámetros de enrutamiento [nombre de la categoría, id de la primera, segunda y tercera categorías]

this.$router.push()
{
    
    
 name:'search',
 query:{
    
    
    categoryName:'电子书',
    category2Id:4
 }
}

// 三级联动路由跳转和传递参数的业务
    goSearch(event) {
    
    
      // alert(444)
      // 问题1：如何判断点击子节点的是A标签
      // 答：把子节点当中的a标签，加上自定义的属性，其余子节点是没有的（自定义属性：浏览器会将驼峰命名转换为一般的命名）
      // 问题2：如何判断是几级的目录？
      // 答：也是根据自定义属性加上的自身的ID值进行条件判断
      // 问题3：如何获取当前的事件 答：event

      // event.target :获取到的是触发事件的元素（h3,a,dt,dl）
      let node = event.target;
      // 节点有一个属性dataset属性，可以获取自定义属性与属性值 (这里一定要小写，不是给你说了么，浏览器会将自定义属性变为全部小写)
      let {
    
     categoryname, category1id, category2id, category3id } =
        node.dataset;
      console.log(event);
      // 当这个标签是A标签的时候才会进入判断
      if (categoryname) {
    
    
        /*         {
        name:'search',
        query:{
            categoryName:'电子书',
            category2Id:4
        } */
        // 准备路由跳转的参数 设置对象
        let location = {
    
     name: "search" };
        let query = {
    
     categoryname: categoryname };
        // 一级目录
        if (category1id) {
    
    
          query.category1id = category1id;
        } else if (category2id) {
    
    
          query.category2Id = category2id;
        } else {
    
    
          query.category3id = category3id;
        }

        // 路由跳转前要合并参数
        // 1.判断路由中是否有params参数，有则进行合并
        if (this.$route.params) {
    
    
          // 动态的给location添加params属性
          location.params = this.$route.params;
          // 动态的给location添加query属性
          location.query = query;
        }
        this.$router.push(location);
      }
    },

7. Enlace de tres niveles y animación de transición en el módulo de búsqueda.

En el módulo de inicio, se utiliza una función de vinculación de tres niveles---->[typeNav]
En el módulo de búsqueda, también se utiliza una función de vinculación de tres niveles------->[typeNav]

¿Análisis de negocio de componentes de TypeNav?

El enlace de tres niveles se muestra normalmente en el módulo de inicio
La vinculación de tres niveles se mostrará durante un tiempo en la búsqueda y se ocultará durante un tiempo. Solución: controle la visualización y ocultación de la vinculación de tres niveles a través de un atributo de respuesta
. componente de vinculación saber quién lo está utilizando.
Deje que los componentes distingan bajo qué módulo a través $r u t e deje que los componentes se distingan bajo ese módulo Solución: 1. Agregue v al componente T y p e N a v - show realiza enlace dinámico 2. Establecer el valor inicial de show en el método de datos 3. Distinguir a través de la información de enrutamiento de$ ruta

    // 当鼠标移入时，全部商品分类列表进行展示
    enterShow() {
    
    
      if (this.$route.path != "/home") {
    
    
        this.show = true;
      }
    },
    // 当鼠标离开的时候，全部商品类别进行影藏
    leaveShow() {
    
    
      if (this.$route.path != "/home") {
    
    
        this.show = false;
      }

Cuando la ruta salta, el componente correspondiente será destruido y recreado ---- [kepp-alive]

4) Efectos de transición

Cuando entré en contacto con él por primera vez: CSS3
También hay efectos de animación de transición en Vue: los componentes incorporados de transición están completos

 HTML：<transition name="sort"> 相应的节点和组件</transition>
 CSS：// 过渡动画的样式
    // 开始进入状态
    .sort-enter {
    
    
      height: 0;
    }
    // 结束状态
    .sort-enter-to {
    
    
      height: 461px;
    }
    // 定义动画的时间和速率
    .sort-enter-active {
    
    
      transition: all 0.5s linear;
    }

Nota 1, en Vue, puede agregar efectos de animación de transición a (un cierto nodo) | (un cierto componente)
El nodo|componente debe tener la instrucción v-if|v-show antes de que pueda usarse.

8. ¿Por qué envía con frecuencia solicitudes al servidor para obtener los datos del enlace de tres niveles?

Los datos del enlace de tres niveles son un componente global, y se hacen saltos en los componentes utilizados, porque cuando salta el enrutamiento, el componente será destruido [creado del componente de inicio: despacho de acciones a vuex, por lo que los datos del el enlace de tres niveles se obtiene con frecuencia], solo necesita enviar una solicitud una vez para obtener los datos del enlace de tres niveles, y no necesita hacerlo varias veces.
Solución final: moutend en la aplicación solo se ejecutará una vez
Aunque main también se ejecuta una vez, no es un componente, sin esto, el componente tiene el atributo $store

9. Combinar parámetros

Al ingresar a la página de búsqueda, se deben pasar varios parámetros para enviar una solicitud al servidor para obtener los datos correspondientes.

Combinar parámetros
¿Por qué necesita combinar parámetros (consulta | parámetros): porque estos parámetros son útiles para la búsqueda, porque la búsqueda
envía solicitudes al servidor a través de estos parámetros, y estos parámetros deben llevarse al servidor, y el servidor devolverá Se pueden mostrar los datos de búsqueda del usuario correspondiente, la búsqueda.

1. El negocio de vinculación de tres niveles desarrollado, cuando hace clic en una etiqueta, saltará a la ruta y pasará el nombre del producto y la identificación al módulo de búsqueda----(consulta) 2. Cuando se haga clic en el botón de búsqueda , el
usuario La palabra clave ingresada se pasará al módulo de búsqueda a través del parámetro params cuando se haga clic en el botón -----(params)
3. Salto de enrutamiento (inicio->búsqueda), dos lugares, enlace de tres niveles (typeNav ), componente de encabezado (botón de búsqueda)

 // 路由跳转前要合并参数
        // 1.判断路由中是否有params参数，有则进行合并
        if (this.$route.params) {
    
    
          // 动态的给location添加params属性
          location.params = this.$route.params;
          // 动态的给location添加query属性
          location.query = query;
        }
        this.$router.push(location);
      }

9. datos simulados

Si la interfaz no está bien escrita, el personal de front-end puede simular algunos datos [algunas interfaces falsas simuladas por los propios programadores de front-end]. Cuando se inicia el proyecto durante el trabajo, es necesario reemplazar los datos simulados con la interfaz. datos dados por el fondo.

10. Comunicación entre componentes

props: ranura padre-hijo
:
evento personalizado padre-hijo:
bus de evento global padre-hijo $bus: universal
pubsub: universal
Vuex: universal
$ref: comunicación padre-hijo

11. El usuario debe realizar múltiples solicitudes para presentar los datos correspondientes en el módulo de búsqueda.

Inicio: Colóquelo en el enlace del ciclo de vida montado, solo se realizará una solicitud
Solución: El método $route de watch y route monitorea si la información de la ruta cambia.

// 数据监听，监听组件实例身上的属性值发生变化  从而用户可以重复的根据组件身上的数据去重复的发送请求
  watch: {
    
    
    // 监听路由的信息是否发生变化
    $route(newValue,oldValue) {
    
    
      // 再次向服务器发送请求之前整理数据带给服务器
      Object.assign(this.searchParams,this.$route.params,this.$route.query)
      // console.log(this.searchParams);
      // 再次发送请求 解决只能一次去发送请求
       this.getData();
      //  每一次请求的时候，应该把相应的123级ID清空，让他接收下一次的相应的123ID
      // 分类和关键字不用清理，因为每次路由发生变化的时候，会给他重新赋值
      this.searchParams.category1Id = ''
       this.searchParams.category2Id = ''
       this.searchParams.category3Id = ''
    },
  },