记一次面试vue问题

太过爱你忘了你带给我的痛 2022-12-02 04:27 293阅读 0赞

**你用的vue-cli版本**  
用的vue2，脚手架用的3

**vue生命周期**

*  总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

>  *  创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
>  *  载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
>  *  更新前/后：当data变化时，会触发beforeUpdate和updated方法。
>  *  销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

**vue双向绑定**

*  vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

**import和require的区别**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]

**路由的标签是什么**

*  router-link 与 router-view

**路由之间跳转传参**

*  `<router-link :to="{name:'home', params: {id:1}}"></router-link>`

**vue如何处理跨域**

*  cors（跨域资源共享https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html）
 *  nginx反向代理 proxy

**vue怎么处理低版本浏览器**

*  Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。使用Vuex和axios时需要浏览器支持：Promise，而IE并不支持Promise。

> 方法一、babel-polyfill 模拟ES2015+  
> 要用 babel-polyfill 来将 ES6 的语法转成ES5，模拟整个 ES2015+ 环境。可以使用Promise 和WeakMap，方法Array.from，Object.assign ，Array.prototype.includes。

npm install --save babel-polyfill  
require(“babel-polyfill”);  
import “babel-polyfill”;

> 方法二、es6-promise 支持 Promise  
> npm install es6-promise  
> require(‘es6-promise’).polyfill();  
> Tip:虽然这些polyfill 满足了一些需求，但无形中增加了项目的大小。

> 方法三、低版本浏览器提示  
> 兼容低版本浏览器本身就是一件很痛苦的事情，同时IE浏览器已经基本成为过去时了，如果再为了兼容这些浏览器做过多的工作的话，实在是一种浪费。  
> 提示用户升级浏览器也是一个不错方法。推荐网站：快乐浏览。  
> 快乐浏览：提供常用的浏览器下载，包括谷歌、火狐、360浏览器等。在VUE项目中的public\\index.html文件里添加如下Js代码：  
> 提示升级浏览器

**post与get区别**  
1.url可见性：  
get，参数url可见  
post，url参数不可见

\*\*get把请求的数据放在url上，即HTTP协议头上，其格式为：以?分割URL和传输数据，参数之间以&相连；post把数据放在HTTP的包体内（requrest body）

2.传输数据的大小：  
get一般传输数据大小不超过2k-4k  
post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大

\*\*get提交的数据最大是2k（原则上url长度无限制，那么get提交的数据也没有限制咯？限制实际上取决于浏览器，浏览器通常都会限制url长度在2K个字节，即使(大多数)服务器最多处理64K大小的url，也没有卵用）；  
post理论上没有限制。实际上IIS4中最大量为80KB，IIS5中为100KB

3.数据传输上：  
get，通过拼接url进行传递参数  
post，通过body体传输参数

\*\*GET产生一个TCP数据包，浏览器会把http header和data一并发送出去，服务器响应200(返回数据);  
POST产生两个TCP数据包，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)

4.后退页面的反应：  
get请求页面后退时，不产生影响  
post请求页面后退时，会重新提交请求

\*\*GET在浏览器回退时是无影响的，POST会再次提交请求

5.缓存性：  
get请求是可以缓存的  
post请求不可以缓存

\*\*GET请求会被浏览器主动cache，而POST不会，除非手动设置

6.安全性：  
都不安全，原则上post肯定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩，浏览器还会缓存get请求的数据。安全性个人觉得是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都一样

7.GET请求只能进行url编码，而POST支持多种编码方式

8.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

9.GET只接受ASCII字符的参数的数据类型，而POST没有限制  
**div拖拽实现**

*  onMousemove, onMouseup, onMousedown( [具体代码][Link 1].)

**vue如何处理跨域**

*  nginx反向代理接口跨域
 *  通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

**vue组件间如何通信**  
父组件与子组件传值  
父组件通过标签上面定义传值  
子组件通过props方法接受数据  
子组件向父组件传递数据  
子组件通过$emit方法传递参数

**文件上传功能**

*  1.创建一个上传文件的标签
 *  2.改动事件
 *  3.上传formData [=》具体步骤][Link 2]

**代码规范**

> 1、 需要声明（DOCTYPE） 2、需要定义语言编码 `<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />`3、JavaScript定义必须要用`<script language="javascript" type="text/javascript">`来开头定义  
> 4、CSS定义必须要用`<style type=“text/css”>`开头来定义 5、所有标签的元素和属性名字都必须使用小写  
> 6、所有属性值必须用引号括起来（" " / ’ '）双引号或单引号 7、把所有特殊符号用编码表示。空格为   
> 、小于号（<）&lt、大于号（>）&gt、和号（&）&amp 等 8、所有属性必须有属性值9、所有的标记都必须有相应的结束标记  
> 10、所有的标记都必须合理嵌套  
> 11、图片添加有意义的alt属性。图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性，帮助显示不完整的内容显示完整。  
> 12、在form表单中增加label，以增加用户友好度

**axios请求**

*  Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API，可以拦截请求和响应并且转换请求数据和响应数据，对响应回来的内容自动转换成 JSON类型的数据 [示例][Link 3]

**created mounted区别**

*  Created：在dom渲染之前调用，通常把初始化数据放在里面调用比如ajax数据等等。
 *  Mounted：在dom渲染之后调用，比如咱们要获取document.getElementById，$(“\#id”)，ref等等需要dom操作放在这里，比如初始化的轮番图效果swiper需要获取dom就放在这里使用  
    methods（方法）：  
    只要进行调用就会执行，不管依赖的值有没有改变。无缓存。

**computed watch区别**

*  computed（计算属性)：  
    监听其所有依赖的变化，如果有变化会执行，没有变化不执行。有缓存，不用每次重新算。不支持异步。  
    详解=》在vue的 模板内（\{ \{\}\}）是可以写一些简单的js表达式的 ，很便利。但是如果在页面中使用大量或是复杂的表达式去处理数据，对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算。  
    1.优点：  
    在数据未发生变化时，优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。而不必想 motheds方法 和 watch 方法是否每次都去执行函数。  
    2.setter 和 getter方法：（注意在vue中书写时用set 和 get）  
    setter 方法在设置值是触发。  
    getter 方法在获取值时触发。
 *  watch（侦听属性）:  
    观察某一个变量，发生变化会执行。支持异步。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。  
    一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。  
    小结：  
    1.主动调用的方法写在methods里，依据某些变量的更新进行某种操作用computed或者watch。  
    2.computed和watch：如果要异步，只能用watch。如果是计算某个值推荐用computed，比如购物车全选单选功能，购物车计算总价小计功能。

**异步转化同步**

mounted: function() { 
      (async function(){ 
        console.log(1)
        var a = await that.testFunc1()
        console.log(a)
        console.log(3)
      })();
    },
    methods: { 
      testFunc1: function() { 
        return new Promise((resolve, reject)=>{ 
          this.testFunc2("","",res=>{ 
            resolve(res);
          });
        });
      },
      testFunc2: function(url,params,callback) { 
        setTimeout(()=>{ 
          callback(2);
        },1000);
      }
    }
    // 打印结果：1,2,3

**父子组件通信**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center 1]  
**vuex**

*  `vuex是vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车`
 *  vuex有五种哪属性，分别是 State、 Getter、Mutation 、Action、 Module  
    vuex的State特性

> A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data  
> B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新  
> C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中  
> vuex的Getter特性 A、getters 可以对State进行计算操作，它就是Store的计算属性 B、  
> 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用 C、 如果一个状态只在一个组件内使用，是可以不用getters  
> vuex的Mutation特性 Action 类似于 mutation，不同在于：Action 提交的是  
> mutation，而不是直接变更状态；Action 可以包含任意异步操作。 （3）不用Vuex会带来什么问题？  
> 可维护性会下降，想修改数据要维护三个地方； 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；  
> 增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背

。  
**git解决代码冲突**

*  情景一：在当前分支上，直接修改冲突代码—>add—>commit。
 *  情景二：在本地当前分支上，修改冲突代码—>add—>commit—>push

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3d9985e7048945b48dcc312796d01806.png
[Link 1]: https://blog.csdn.net/qq_29442755/article/details/106712117
[Link 2]: https://blog.csdn.net/weixin_30466953/article/details/101313417?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param
[Link 3]: https://blog.csdn.net/wandoumm/article/details/80251043
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/f0f6ab44acd94700844c1dcab094daa7.png