前端vue 的面试总结 以及答案以及前端技术点面试

一：先谈优化问题

      前端的优化方式

         初始化阶段：

            1：初始化阶段首页图片加载过多

                1.1：图片懒加载

                 先将img标签中的src链接设为同一张图片，将其真正的图片地址存储在img标签的自定义属性。当js监听到该图片元素进入可视窗口时，再把src          的值替换为自定义属性，减少首屏加载的请求数量，达到懒加载的效果。

      其中的定义滚动事件，和计算是否进入可视窗口，就用到了后面说的防抖和缓存layout属性

 

    2： 初始化阶段http 请求过多

           1：资源压缩合并，减少http 请求， 为了减少http  请求多个 js 合并成一个js，css 也同理

           2： 谷歌浏览器最多只能支撑8 个并发量就是同一时间内只支持8 个htpp 请求，如果需要请求多个接口，可以把接口给合并

    3:  初始化阶段请求的静态资源过大

    

 

    4： 计算量大的处理，可以开启一个worker 线程来计算，worker 必须要了解同源策略

   

    5：js 脚本放到html 底部

    6： 浏览器缓冲

    7： 尽量的避免减少 iframe 嵌套，iframe  会加到http 请求的次数，会重新请求http 。

二：一次完整的http 请求是什么样的

二：vue 的问题

   1： 组件之间的传值方式，参考我写的博客大概说下有几种传值方式

         答：https://www.cnblogs.com/sunliyuan/articles/12188934.html

   2: 路由之间的跳转方式

   3：vuex 是什么，如何使用

   4：说出至少四种vue 的指令以及他的用法

   5:  vue 写组件的时候，什么时候使用key , 为啥要使用key

   6： v-model  的实现原理

   7 ： 在使用过程中 有没有用到自定义指令，他是怎么定义的

  8： 你一般在使用vue 封装组件的时候，需要注意什么

  9:   vue中针对于比较复杂的对象不好监听到，如何自己写一个双向绑定的实现方式（加分项）

三: 前端一些技术面试
   1: 改变this 指向的方式有几种，有什么区别 

   2：promise 是如何变成同步的， 以及promise 返回值是什么 (以及 es7 的async 与await 能说出来最好，这个就是一个异步等待的东西)

         promise 封装一个同步请求，

 

 

         promise 封装一个异步请求

       

// 封装一个get 请求
/**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params,
    }).then((res) => {
      resolve(res.data);
    }).catch((err) => {
      reject(err.data);
    });
  });
}

//封装一个post 请求

/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function post(url, params1) {
  let params = params1;
  if (!(params instanceof FormData)) {
    params = QS.stringify(params);
  }

  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then((res) => {
        if (!res.data || res.data.length === 0) reject(res.data);
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

// 把异步请求换成同步一个个来执行，返回值是一个数组，把每个异步的返回值都放到一个数组里面
export function all(axiosArray) {
  return new Promise((resolve, reject) => {
    axios.all(axiosArray)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

 

 

         promise 不想用 .then， 直接return  给一个变量

 

   3：scss 使用过没，使用过的话怎么定义一个变量封装一个函数（参考我的博客 https://www.cnblogs.com/sunliyuan/p/14449120.html ）

 

四： webpack 打包的方式