2024年最新Vue（五）计算属性、过滤器、axios、vue生命周期，2024年最新oppo前端外包面试

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

举例：使用计算属性计算购物车总价；

• {{p.pid}} | {{p.pname}} | ¥{{p.price.toFixed(2)}} | {{p.count}} | 小计:¥{{(p.price*p.count).toFixed(2)}}

  总价:¥{{total.toFixed(2)}}

  效果如下：

  

  二、过滤器

  过滤器是专门对变量的原始值先加工再显示的一种特殊函数。

  使用方法：

  （1）创建过滤器函数

  Vue.filter(“过滤器名”,function(旧值){

  return 新值

  })

  （2）在页面中使用过滤器函数

  <元素>{{变量名|过滤器名}}</元素>

  //注意

  //过滤器名用在{{}}内，所以如果过滤器名中包含多个单词应用驼峰命名

  举例：使用过滤器过滤性别；

  性别: {{sex|sexFilter}}

  效果如下：

  

  过滤器传参：

  //定义

  Vue.filter(“过滤器名”,function(旧值, 自定义形参, …){

  return 新值

  })

  //使用

  <元素>{{变量名 | 过滤器名(实参值1, …)}}</元素>

  举例：使用过滤器显示不同的性别，可以选择不同的语言；

  性别: {{sex|sexFilter("cn")}}

  性别: {{sex|sexFilter("en")}}

  性别: {{sex|sexFilter("cn")}}

  效果如下：

  

  过滤器连用：

  //定义

  //充分考虑将来进入这个过滤器的旧值共有几种情况

  Vue.filter(“过滤器名”,function(旧值,…){ })

  //使用

  <元素>{{变量 | 过滤器1 | 过滤器2 | … }}</元素>

  举例：给性别追加图标；

  性别: {{sex|sexIcon}}

  性别: {{sex|sexFilter|sexIcon}}

  性别: {{sex|sexFilter("en")|sexIcon}}

  性别: {{sex|sexFilter("cn")|sexIcon}}

  效果如下：

  

  三、axios

  axios是第三方开发的，专门发送ajax请求，基于Promise的函数库；只要在vue中发送ajax请求，一律用axios。

  axios的使用：

  （1）配置服务器端接口地址的公共路径部分

  axios.defaults.baseURL=“http://服务器端基础地址部分”

  （2）get请求

  axios.get(“服务器端接口地址剩余相对路径部分”,{

  params:{ 参数名: 参数值, … : … , … }

  }).then(result=>{

  })

  //注意：

  //.then后必须用箭头函数

  //result不直接是响应结果，result.data才是真正的响应结果

  （3）post请求

  axios.post(

  “服务器端接口地址剩余相对路径部分”,

  “参数名1=参数值1&参数名2=参数值2&…”

  ).then(result=>{

  console.log(result.data);

  })

  （4）运行时axios会自动将baseURL和get/post中的相对路径拼接成接口的完整地址再发送请求。

  举例：模拟访问器服务器相关数据；

  请求结果如下：

  

  需要特别注意： axios发送get请求和发送post请求的参数格式是不一样的。

  

  四、vue的生命周期（高频笔试面试）

  new Vue()的加载过程是异步的，放在new Vue()之后的代码是无法保证在vue加载完之后才执行的，所以将来程序的主要流程和代码，都要写在new Vue()内部；

  其实new Vue()和普通网页一样，在整个加载过程中也要经历多个阶段——生命周期。

  1.vue生命周期四个阶段

  必经阶段

  （1）创建(create)阶段：创建data对象、访问器属性；

  （2）挂载(mount)阶段：扫描真实DOM树，创建虚拟DOM树，并首次加载数据到页面显示；

  不必经阶段

  （3）更新(update)阶段：只当修改data中的变量，且影响页面显示时触发；

  （4）销毁(destroy)阶段：只当主动调用vm.$destroy()函数后触发，只删除虚拟DOM树断开的new Vue()与页面之间的联系，但是new Vue()对象还在内存中。

  主动调用 **vm.$destroy()\ast \ast 函数销毁后，可用\ast \ast vm.$mount(“#app”)**将断开的new Vue()和页面重新建立虚拟DOM树，重新绑定起来挂载界面。

  2.每个阶段前后，各有一对生命周期钩子函数（回调函数）

  new Vue({中

  /必经阶段/

  beforeCreate(){…} //没data、访问器属性，没虚拟DOM树

  //创建(create)阶段

  created(){…} //有data、访问器属性，没虚拟DOM树

  beforeMount(){…} //有data、访问器属性，有虚拟DOM树，但页面内容未加载

  //挂载(mount)阶段

  mounted(){ …} //有data、访问器属性和虚拟DOM树，页面内容也加载完成，new Vue()首屏加载完成

  /不必经阶段/

  beforeUpdate(){…}

  //更新(update)阶段

  updated(){…}

  beforeDestroy(){…}

  //销毁(destroy)阶段

  destroyed(){…}

  举例：触发new Vue()声明周期各个阶段；

  HTTP

  • HTTP 报文结构是怎样的？

  • HTTP有哪些请求方法？

  • GET 和 POST 有什么区别？

  • 如何理解 URI？

  • 如何理解 HTTP 状态码？

  • 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

  • 对 Accept 系列字段了解多少？

  • 对于定长和不定长的数据，HTTP 是怎么传输的？

  • HTTP 如何处理大文件的传输？

  • HTTP 中如何处理表单数据的提交？

  • HTTP1.1 如何解决 HTTP 的队头阻塞问题？

  • 对 Cookie 了解多少？

  • 如何理解 HTTP 代理？

  • 如何理解 HTTP 缓存及缓存代理？

  • 为什么产生代理缓存？

  • 源服务器的缓存控制

  • 客户端的缓存控制

  • 什么是跨域？浏览器如何拦截响应？如何解决？

    开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】