2024年最全前端口试八股文【很经典 很全面 字字珠玑】【发起收藏+关注】，2024年最新web前端口试题 应届生

自学几个月前端，为什么感觉什么都没学到？？

---

这种征象在许多的初学者和自学前端的同砚中是比力的常见的。
由于自学走的弯路是比力的多的，会踩许多的坑，学习的过程中是比力的迷茫的。
最告急的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么水平才算好，学了能做什么。
许多自学的朋侪通常都是自己去找资料学习的，资料上有的大概就学到了，资料上没有的大概就没有学到。
这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。
但是真的是如许的吗？非也，由于许多人找的资料就是很底子的。学完了也就是把握一点底子的东西。分享给你一份前端分析门路，你可以参考。
开源分享：【大厂前端口试题剖析+核心总结学习条记+真实项目实战+最新讲授视频】

另有许多的同砚在学习的过程中一味的寻修业的速率，很快速的刷视频，写了背面忘了前面，末了什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个以是然。
以是学习编程肯定要注意实践操纵，训练敲代码的时间肯定要多余看视频的时间。

---

20.动画有哪些实现方法?

• Js
  setTimeout、setInterval、requestAnimationFrame
  requestAnimationFrame方法是h5提供的一种专门办理动画更新的API，欣赏器会自动以最符合的频率去革新动画
  jQuery中动画也比力实用
  
• css
  animation
  
• canvas元素团结JS
  
• 插件
  比方 jQuery
  

---

21.浅拷贝

浅拷贝对原对象或副本的更改大概也会导致其他对象的更改。它现实上只拷贝了一层，而且只当数组和对象包的值是原始值时才会举行拷贝。

• 赋值运算符 =
  

1.         let a=[1,2,3]
2.         let b=a;
3.         console.log(b==a)//true

复制代码

• 扩展运算符 …
  

1.         let a=[1,2,3]
2.         let b=[...a]//把数组a的内容 挨个取出 放到b数组中
3.         console.log(b===a) //true

复制代码

• slice方法
  

1.         let a=[1,2,3]
2.         let b=a.slice()
3.         console.log(a===b) //false
4.         a[0]=4;
5.         console.log(a)//4 2 3
6.         console.log(b) //1 2 3

复制代码

• assign方法
  

1. let a=[1,2,3]
2. let b=[]
3. Object.assign(b,a);
4. a[0]=4
5. console.log(a)//4 2 3
6. console.log(b) //1 2 3

复制代码

• Array.from
  

1. let a=[1,2,3]
2. let b=Array.from(a)
3. a[0]=4
4. console.log(a)//4 2 3
5. console.log(b) //1 2 3

复制代码

---

22.深拷贝

Javascript对象和数组如果深度嵌套，浅拷贝只能实现第一层的拷贝，但是深度的值依然和原对象共享引用。

1. let a=[ [1],[2], [3]]
2. let b=[...a] //浅拷贝
4. a[0][0]= 4
5. console.log(a) // [[4],[2],[3]]
6. consle.log(b) // [[4],[2],[3]] 对象b也被改变了 这时浅拷贝的弊端体现出来了

复制代码

• 利用JSON
  

1. let a=[ [1],[2], [3]]
2. let b=JSON.parse(JSON.stringfy(a));
3. a[0][0]=4;
4. console.log(a) // [ [4],[2], [3]]
5. console.log(b) // [ [1],[2], [3]]

复制代码

• structuredClone
  

1. let a=[ [1],[2], [3]]
2. let b=structuredClone(a);
3. a[0][0]=4;
4. console.log(a) // [ [4],[2], [3]]
5. console.log(b) // [ [1],[2], [3]]

复制代码

• 第三方库 lodasg、rfdc
  
• 自界说函数实现
  

1. const deepCopy=(obj)=>{
2.         if(typeof obj !=='object' || obj == null){
3.                 return obj;
4.         }
5.         const newObj= Array.isArray(obj) ? []:{};
6.         Object.keys(obj).forEach((key)=>{
7.                 newObj[key]=deepCopy(obj[key]);
8.         })
9.         return newObj;
10. }

复制代码

上述代码只能处置惩罚对象和数组的深度拷贝
注意明白深拷贝和浅拷贝的区别

---

23. 说一下原型链

原型就是一个平常对象，它是为构造函数的实例共享属性和方法；全部实例中引用
的原型都是同一个对象
利用 prototype 可以把方法挂在原型上，内存值生存一份
__proto__可以明白为指针，实例对象中的属性，指向了构造函数的原型（prototype）

---

24. new 操纵符具体做了什么？

• 先创建一个空对象
  
• 把空对象和构造函数通过原型链举行链接
  
• 把构造函数的 this 绑定到新的空对象身上
  
• 根据构建函数返回的范例判定，如果是值范例，则返回对象，如果是引用范例，
  就要返回这个引用范例
  

---

25.script 标签里的 async 和 defer 有什么区别？

当没有 async 和 defer 这两个属性的时间，欣赏器会立即加载并实验指定的脚本

• 有 async
  加载和渲染背面元素的过程将和 script 的加载和实验并行举行（异步）
  
• 有 defer
  加载和渲染背面元素的过程将和 script 的加载并行举行（异步），但是它的实验事故要等
  全部元素剖析完成之后才会实验
  

---

26. setTimeout 最小实验时间是多少？

HTML5 规定的内容：
setTimeout 最小实验时间是 4ms
setInterval 最小实验时间是 10ms

---

27. promise 的内部原理是什么？它的优缺点是什么？

   Promise 对象，封装了一个异步操纵而且还可以获取乐成或失败的效果
Promise 重要就是办理回调地狱的标题，之前如果异步使命比力多，同时他们之间
有相互依赖的关系，就只能利用回调函数处置惩罚，如许就容易形成回调地狱，代码的可读性差，可维护性也很差
  有三种状态：pending 初始状态 fulfilled 乐成状态 rejected 失败状态
状态改变只会有两种情况，
pending -> fulfilled; pending -> rejected 一旦发生，状态就会凝固，不会再变
起首就是我们无法取消 promise，一旦创建它就会立即实验，不能中途取消
如果不设置回调，promise 内部抛出的错误就无法反馈到外貌
若当前处于 pending 状态时，无法得知现在在哪个阶段。
原理：
   构造一个 Promise 实例，实例须要通报函数的参数，这个函数有两个形参，分
别都是函数范例，一个是 resolve 一个是 reject
promise上另有then方法，这个方法就是来指定状态改变时简直定操纵，resolve
是实验第一个函数，reject 是实验第二个函数
  

---

28.promise 和 async await 的区别是什么？

• 都是处置惩罚异步哀求的方式
  
• promise 是 ES6，async await 是 ES7 的语法
  
• async await 是基于 promise 实现的，他和 promise 都黑白壅闭性的
  优缺点：
  
• promise 是返回对象我们要用 then，catch 方法行止置惩罚和捕捉非常，而且誊写方式
  是链式，容易造成代码重叠，欠好维护，async await 是通过 tra catch 举行捕捉非常
  
• async await 最大的优点就是能让代码看起来像同步一样，只要碰到 await 就会立
  刻返回效果，然后再实验背面的操纵
  promise.then()的方式返回，会出现哀求还没返回，就实验了背面的操纵
  

---

29.欣赏器的存储方式有哪些？

• cookies
  H5 尺度前的当地存储方式
  兼容性好，哀求头自带 cookie
  存储量小，资源浪费，利用贫苦（封装）
  
• localstorage
  H5 参加的以键值对为尺度的方式
  操纵方便，永世存储，兼容性较好
  生存值的范例被限定，欣赏器在隐私模式下不可读取，不能被爬虫
  
• sessionstorage
  当前页面关闭后就会立即整理，会话级别的存储方式
  
• indexedDB
  H5 尺度的存储方式，，他是以键值对举行存储，可以快速读取，得当 WEB 场
  景
  

30.token 存在 sessionstorage 还是 loaclstorage？

token：验证身份的令牌，一样平常就是用户通过账号暗码登录后，服务端把这些根据
通过加密等一系列操纵后得到的字符串

• 存 loaclstorage 里，后期每次哀求接口都须要把它看成一个字段传给配景
  
• 存 cookie 中，会自动发送，缺点就是不能跨域
  
• 如果存在 localstorage 中，容易被 XSS 攻击，但是如果做好了对应的步调，那么是
  利大于弊
  
• 如果存在 cookie 中会有 CSRF 攻击
  

---

31. token 的登录流程。

• 客户端用账号暗码哀求登录
  
• 服务端收到哀求后，须要去验证账号暗码
  
• 验证乐成之后，服务端会签发一个 token，把这个 token 发送给客户端
  
• 客户端收到 token 后生存起来，可以放在 cookie 也可以是 localstorage
  
• 客户端每次向服务端发送哀求资源的时间，都须要携带这个 token
  
• 服务端收到哀求，接着去验证客户端里的 token，验证乐成才会返回客户端哀求
  的数据
  

---

32.页面渲染的过程是怎样的？

• DNS 剖析
  
• 创建 TCP 毗连
  
• 发送 HTTP 哀求
  
• 服务器处置惩罚哀求
  
• 渲染页面
  5.1 欣赏器会获取 HTML 和 CSS 的资源，然后把 HTML 剖析成 DOM 树
  5.2 再把 CSS 剖析成 CSSOM
  5.3 把 DOM 和 CSSOM 归并为渲染树
  5.4 布局
  5.5 把渲染树的每个节点渲染到屏幕上（绘制）
  
• 断开 TCP 毗连
  

---

33.DOM 树和渲染树有什么区别？

• DOM 树是和 HTML 标签逐一对应的，包罗 head 和潜伏元素
  
• 渲染树是不包罗 head 和潜伏元素
  

---

34.精灵图和 base64 的区别是什么？

• 精灵图：把多张小图整合到一张大图上，利用定位的一些属性把小图体现在页面上，
  当访问页面可以淘汰哀求，进步加载速率
  
• base64：传输 8Bit 字节代码的编码方式，把原来二进制情势转为 64 个字符的单位，
  末了构成字符串
  base64 是会和 html css 一起下载到欣赏器中，淘汰哀求，淘汰跨域标题，但是一些
  低版本不支持，若 base64 体积比原图片大，倒霉于 css 的加载。
  

---

35.svg 格式相识多少？

基于 XML 语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG 是
属于对图像形状的形貌，本质是文本文件，体积小，而且不管放大多少倍都不会失真

• SVG 可直接插入页面中，成为 DOM 一部分，然后用 JS 或 CSS 举行操纵
  <svg></svg>
  
• SVG 可作为文件被引入
  <img src="pic.svg" />
  
• SVG 可以转为 base64 引入页面
  

---

36.HTTP 协议规定的协议头和哀求头有什么？

• 哀求头信息：
  Accept:欣赏器告诉服务器所支持的数据范例
  Host:欣赏器告诉服务器我想访问服务器的哪台主机
  Referer:欣赏器告诉服务器我是从那边来的（防盗链）
  User-Agent:欣赏器范例、版本信息
  Date:欣赏器告诉服务器我是什么时间访问的
  Connection:毗连方式
  Cookie
  X-Request-With:哀求方式
  
• 相应头信息：
  Location:这个就是告诉欣赏器你要去找谁
  Server:告诉欣赏器服务器的范例
  Content-Type:告诉欣赏器返回的数据范例
  Refresh:控制了的定时革新
  

---

37.说一下什么是“同源战略”？

http:// www. aaa.com:8080/index/vue.js
协议 子域名 主域名 端标语 资源
同源战略是欣赏器的核心，如果没有这个战略就会遭受网络攻击
重要指的就是协议+域名+端标语三者同等，若此中一个不一样则不是同源，会产生
跨域
三个答应跨域加载资源的标签：img link script
跨域是可以发送哀求，后端也会正常返回效果，只不外这个效果被欣赏器拦截了！

• JSONP
  
• CORS
  
• websocket
  
• 反向署理
  

---

38.防抖和节流是什么？

都是应对页面中频仍触发事故的优化方案

• 防抖:克制事故重复触发
  利用场景:1.频仍和服务端交互 2.输入框的自动生存事故
  
• 节流:把频仍触发的事故淘汰,每隔一段时间实验
  利用场景:scroll 事故
  

---

39.有没有做过无感登录？

• 在相应此中拦截，判定 token 返回逾期后，调用革新 token 的接口
  
• 后端返回逾期时间，前端判定 token 的逾期时间，去调用革新 token 的接口
  
• 写定时器，定时革新 token 接口
  流程：
  
• 登录乐成后生存 token 和 refresh_token
  
• 在相应拦截器中对 401 状态码引入革新 token 的 api 方法调用
  
• 更换生存当地新的 token
  
• 把错误对象里的 token 更换
  
• 再次发送未完成的哀求
  
• 如果 refresh_token 逾期了，判定是否逾期，逾期了就清晰全部 token 重新登
  

---

40.大文件上传是怎么做的？

• 分片上传：
  1.1把须要上传的文件按照肯定的规则，分割成雷同巨细的数据块
  1.2 初始化一个分片上传使命，返回本次分片上传的唯一标识
  1.3 按照肯定的规则把各个数据块上传
  1.4 发送完成后，服务端会判定数据上传的完备性，如果完备，那么就会把数据库归并成原始文件
  
• 断点续传：
  服务端返回，从那边开始 欣赏器自己处置惩罚
  

---

Vue篇

---

1. 生命周期

1.1 有哪些生命周期

体系自带：
   

• beforeCreate
  
• created
  
• beforeMount
  
• mounted
  
• beforeUpdate
  
• updated
  
• beforeDestroy
  
• destroyed
  

  如果给组件加上keep-alive，会额外多
   

• activated
  
• deactivated
  

  

---

1.2初次进入页面大概组件，会实验哪些生命周期

   

• beforeCreate
  
• created
  
• beforeMount
  
• mounted
  

  若组件添加keep-alive属性
   

• beforeCreate
  
• created
  
• beforeMount
  
• mounted
  
• acitivated
  

  

---

1.3在哪个阶段产生                              e                      l                      ，                          el，               el，data

   

• $el (根节点dom) 产生阶段 : mounted
  
• $data产生阶段：created
  

  

---

1.4 第n（n>1）次进入组件会实验哪些生命周期

平常组件
   

• beforeCreate
  
• created
  
• beforeMount
  
• mounted
  

  组件【添加keep-alive属性】
   

• activated
  
• 若脱离，则实验deactivated
  

  

---

2.对keep-alive的明白

   

• 是什么
  Vue自带的一个组件
  功能:用来缓存组件的 【提拔性能】
  
• 利用场景【只管淘汰发送网络哀求与后端交互+反复访问的组件淘汰其创建次数】
  缓存详情页【组件】->在详情页的activated方法中判定之前革新的参数与当前吸收的参数是否同等，如果同等就不革新数据，否则就发送网络哀求革新数据
  

  

---

3.v-if 和 v-show的区别

• dom元素的加载区别
  

   v-if 是创建了一个dom节点 如果值为true时 值为false时不创建大概移除该节点
v-show 是直接创建 display:none 潜伏了
  

• 利用场景差别
  

   

• 初次加载v-if比v-show好 页面不会多加载dom盒子
  
• 频仍切换 v-show比v-if好 创建和删除开销太大，体现和潜伏开销小
  
• 如果都是值为true，初次加载v-if比v-show快，雷同的节点v-show会多加一个display:none=的css属性
  

  

---

4.v-if 和v-for优先级

v-for 比 v-if 优先级更高 vue.js源码中可以看到 v-for 的分支在v-if之前
   

• 如果同一个组件 既加了v-for 也加了 v-if 那么速率会降落许多，是先实验v-for渲染列表数据，然后再每个子项都举行v-if判定，增大开销。
  
• 如果须要判定v-if创建，再实验v-for渲染子项，那么可以利用template模板
  

1. <template v-if="condition">
2.         <div v-for="item in list"></div>
3. </template>

复制代码

---

5.ref是什么

   

• 作用： 用来快速获取dom的，而不消document.getElement*（）
  
• 利用示例：
  

1. <img ref="imgref"  src="\*\*"  id= "img" >

复制代码

原生js：
document.getElementById("img")
vue:
this.$refs.imgs
  

---

6.nextTick是什么

   

• 作用：获取更新后的dom内容
  比方：
  <div ref="box" @click="change">{{content}}</div>
  

1. ...
2. data(){
3.         return {
4.                 content:"old"
5.         }
6. }
7. methods:{
8.         change(){
9.                 this.str="new";
10.                 console.log(this.$refs.box.innerText);//输出old ref中的dom数据未来得及更新
11.                 this.$nextTick(()=>{
12.                         console.log(this.$refs.box.innerText);//输出new
13.                 })
14.         }
15. }

复制代码

---

7.scoped 原理

   

• 作用：让样式在本组件中收效，不影响其他组件
  
• 原理：给组件节点新增自界说属性，然后css根据属性选择器添加样式，类似于下面…
  

1. <style>
2.         div[data-v-xxx]{
3.                 background:red;
4.         }
5. </style>
6. ...
7. <div data-v-xxx>sss</div>
8. <div>bbb</div>

复制代码

---

8.CSS样式穿透

   怎样让CSS只在当前组件中起作用？
  

• 给当前组件添加scoped
  <style scoped></style>
  如果不加，则该css样式全局收效
  
• scss
  2.1 先下载 npm install sass-loader node-sass --save
  2.2 须要给style 添加 属性 lang="scss"
  

1. <style scoped  lang="scss">
2.   $color: red;
3.   .warn{
4.            color:        $color;
5.   }
6. </style>

复制代码

2.3 scss样式穿透

1. 父元素 /deep/ 子元素 {
2. 新样式
3. }

复制代码

比方 修改第三方插件的样式

3. stylus
3.1 下载
npm install stylus stylus-loader --svae
3.2 添加lang属性
<style lang="stylus" scoped> </style>
3.3 stylus样式穿透 [两种方式 deep 大概 >>> ]

1. <style scoped lang="stylus">
2. 父元素 /deep/ 子元素 {
3. 新样式
4. }
5. 父元素 >>> 子元素 {
6. 新样式
7. }
9. </style>

复制代码

---

9.组件的传值

• 父组件传值给子组件
  

   

• 父组件
  <Child :data="msg"></Child>
  msg和data内里的变量名同等
  
• 子组件
  

1. <div>{{data}}</div>
2. export default{
3.   //1. 数组
4.   props:['data']
5.   //2. 对象
6.    props:{
7.      data:String
8.    }
9. }

复制代码

• 子组件传值到父组件
  

   

• 子组件
  this.$emit("eventName",value);
  
• 父组件 在组件中利用 @事故名 绑定子组件的事故到函数
  

1. <div  @eventName="getVal"></div>
2. ...
3. methods:{
4.         getVal(msg){
5.                 this.content=msg; //msg就是子组件传递的内容
6.         }
7. }

复制代码

• 兄弟组件之间的传值
  

   通过中转站 eventBus
  

• 创建bus.js
  

1. import Vue from 'vue'
2. export default new Vue;

复制代码

• 发送
  

1. import bus from '@/bus'
2. bus.$emit("toBrother",value);

复制代码

• 吸收
  

1. import bus from '@/bus'
2. mounted(){
3.         bus.$on("toBrother",(data)=>{
4.                 this.data=data;  //data就是其他兄弟节点传递过来的
5.         })
6. }

复制代码

---

10.computed,methods,watch有什么区别

• computed vs methods
  

   computed 盘算属性是有缓存的【只有当盘算的内容发生厘革时才会重新盘算和调用】 比方 return 111 ; 调用三次 也只会调用一次computed方法，由于值不会发生厘革。
methods 没有缓存 调用多少次实验多少次
  

• computed vs watch
  

   

• watch :
  1.1 侦听属性 数据大概路由发生了改变才会实验
  1.2 一次只能监听单个变量 厘革情况 如须要监听多个比力繁琐
  
• computed
  2.1 盘算的某一个属性的值改变了，盘算属性会检测到举行返回。
  2.2 computed一个方法可以监听多个干系属性
  

  

---

11.props 和data 优先级比力

props是父组件通报进来的，data是组件自己界说的
优先级: props => methods=> data => computed=> watch

---

12.Vue设置署理

署理用于办理开辟时的网络跨域标题，可以将全部哀求交由proxy去访问
   

• 创创建置文件 vue.config.js
  

1. module.exports = {
2. publicPath:'./',
3.         devServer: {
4.                 proxy: 'http://localhost:3000'  // 打包完成后不生效
5.         }
6. }

复制代码

• 利用时url 不加前面的ip段 直接写接口 如/login
  
• 如果是开辟模式 devServer不实用 会打包后出现非常
  

  

---

13. Vue打包路径和路由模式

打包路径设置
vue.config.js

1. module.exports = {
2.         publicPath:'./', // 默认为 / 打包后css js等文件的引入地址前缀
3. }

复制代码

路由模式：history[默认]，hash #
   前端如果自己测试项目，用hash
项目上线要求是 history模式，该怎么办？
交给后端举行重定向
  

---

14.署理和情况变量

开辟情况 .env.development

1. VUE\_APP\_TITLE=
2. VUE\_APP\_ENV='dev'
3. VUE\_APP\_BASE\_API="http:localhost:3000/"

复制代码

生产情况 .env.production

1. VUE\_APP\_TITLE=
2. VUE\_APP\_ENV='pro'
3. VUE\_APP\_BASE\_API="http:127.0.0.1:3000/"

复制代码

在axios封装的时间其base_url

1.         let base_url=""
2.         if(process.env.VUE\_APP\_ENV=='pro'){
3.                 base_url=process.baseApi+url;
4.         }else{
5.                 // dev模式可以通过代理去访问 直接为默认的url即可
6.                 base_url=url;
7.         }

复制代码

---

15.Vue路由

路由模式：history[默认]，hash #
区别：
   

• 体现情势差别
  hash模式多了#
  
• 跳转
  访问 http:localhost:8888/id
  history：会发送哀求
  hash: 不会发送
  
• 打包后 前端自测要利用hash，如果利用history会出现空缺
  

  

---

16.SPA及SPA的缺点

SPA是什么？单页面应用
缺点：
   

• SEO优化欠好
  
• 性能不是特殊好【须要首页优化】
  

  

---

17.怎样明白 MVVM 的？

是 Model-View-ViewModel 的缩写。前端开辟的架构模式
M：模子，对应的就是 data 的数据
V：视图，用户界面，DOM
VM：视图模子：Vue 的实例对象，毗连 View 和 Model 的桥梁
核心是提供对 View 和 ViewModel 的双向数据绑定，当数据改变的时间，ViewModel
能监听到数据的厘革，自动更新视图，当用户操纵视图的时间，ViewModel 也可以监听到视
图的厘革，然后关照数据举行改动，这就实现了双向数据绑定
ViewModel 通过双向绑定把 View 和 Model 毗连起来，他们之间的同步是自动的，
不须要以为干涉，以是我们只须要关注业务逻辑即可，不须要操纵 DOM，同时也不须要关
注数据的状态标题，由于她是由 MVVM 同一管理

---

18.v-for 中的 key 值的作用是什么？

key 属性是 DOM 元素的唯一标识
作用：

• 进步假造 DOM 的更新
  
• 若不设置 key，大概会触发一些 bug
  
• 为了触发太过效果
  

---

19.VUE路径传值

显式传值

1.         ==>localhost:8080/about?a=1;
2.         this.$router.push({
3.                 path:'/about',
4.                 query:{
5.                         a:1       
6.                 }
7.         })
8.         this.$router.push({
9.                 path:'/about?a=1'
10.         })
11.         使用query接收值
12.         this.$router.query.a

复制代码

隐式传值

1.         this.$router.push({
2.                 name:'/About',
3.                 params:{a:1}
4.         })
5.         接收：
6.         this.$router.params.a

复制代码

---

20.vue 中遍历全局的方法有哪些？

• 平常遍历，对象.forEach()
  

1. arr.forEach(function(item,index,arr){
2.         console.log(item,index)
3. })

复制代码

• 对元素同一操纵 对象.map()
  

1. var newarr = arr.map(function(item){
2.         return item+1
3. })

复制代码

3.查找符合条件的元素 对象.filter()

1. arr.filter(function(item){
2.         if(item > 2){
3.                 return false
4.         }else{
5.                 return true
6.         }
7. })

复制代码

4.查询符合条件的元素，返回索引 对象.findindex()

1. arr.finindex(function(item){
2.         if(item>1){
3.                 return true
4.         }else{
5.                 return false
6.         }
7. })

复制代码

• 对象.evening() 碰到不符合的对象会克制
  
• 对象.some() 找到符合条件的元素就克制
  

---

21. vue 的过滤器怎么利用？

vue 的特性，用来对文本举行格式化处置惩罚
利用它的两个地方，一个是插值表达式，一个是 v-bind
分类：

• 全局过滤器
  

1. Vue.filter('add',function(v){
2.         return v < 10 ? '0' + v : v
3. })
4. <div>{{33 | add}}</div>

复制代码

• 当地过滤器
  和 methods 同级
  

1. filter:{
2.         add:function(v){
3.                 return v < 10 ? '0' + v : v
4.         }
5. }

复制代码

---

22.怎样封装一个组件？

• 利用 Vue.extend()创建一个组件
  
• 利用 Vue.components()方法注册组件
  
• 如果子组件须要数据，可以在 props 中吸收界说
  
• 子组件修改好数据，要把数据通报给父组件，可以用 emit()方法
  原则：
  (1) 把功能拆开
  (2)只管让组件原子化，一个组件做一件事变
  (3)容器组件管数据，展示组件管视图
  

---

23.封装一个可复用的组件，须要满足什么条件？

• 低耦合，组件之间的依赖越小越好
  
• 最好从父级传入信息，不要在公共组件中哀求数据
  
• 传入的数据要举行校验
  
• 处置惩罚事故的方法写在父组件中
  

---

24.路由导航守卫有哪些

全局、路由独享、组件内
   

• 全局【参数 to from next】
  beforeEach、beforeResolve, afterEach
  
• 路由独享
  beforeEnter
  
• 组件内【很少】
  beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave
  

1. const router = new VueRouter({
2.         mode:"history",
3.         base:process.env.BASE\_URL,
4.         routes
5. })
6. router.beforeEach((to, from,next)=>{
7.         console.log(to,from,next)//to是到哪个页面 from从哪来 next 就是保安
8.         if(有权限){
9.                 next() // 放行
10.         }else{
11.                 router.push('/login') //转发到其他页面
12.         }
13. })

复制代码

在进入某个页面之进步行拦截，可以举行权限判定
分享

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