专业技能
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限，仅展示部分内容
- parentNode 节点(元素)的父节点
- childNodes
- attributes 节点(元素)的属性节点
17. js有哪些数据类型?
原始数据类型：
- number
- bigint
- boolean
- symbol
- string
- undefined
- null
引用数据类型：
Math,Date,Array…
18.基本类型与引用类型有什么区别?
- 存储
1.1 基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中
1.2 引用类型的值是对象, 保存在堆内存中. 包含引用类型的变量实际上包含的并不是对象本身, 而是一个指向改对象的指针
1.3 但是对象的变量名是保存在栈内存中，而变量名的值则是引用子堆内存 - 复制
2.1 从一个变量向另一个变量复制基本类型的值, 会创建这个值的一个副本
2.2 从一个变量向另一个变量复制引用类型的值, 复制的其实是指针, 因此两个变量最终都指向同一个对象 - 检测类型
3.1 确定一个值是哪种基本类型可以用typeof操作符
3.2 确定一个值是哪种引用类型可以使用instanceof操作符
19. 关于js的垃圾回收
js是一门具有自动垃圾回收机制的编程语言,开发人员不必关心内存分配和回收问题
- 离开作用域的值将被自动标记为可以回收, 因此将在垃圾收集期间被删除
- **“标记清除”**是目前主流的垃圾收集算法, 这种算法的思路是给当前不使用的值加上标记, 然后再回收其内存
- 另一种垃圾收集算法是**“引用计数”,** 这种算法的思想是跟踪记录所有值被引用的次数. js引擎目前都不再使用这种算法, 但在IE中访问非原生JS对象(如DOM元素)时, 这种算法仍然可能会导致问题
- 当代码中存在循环引用现象时, “引用计数” 算法就会导致问题
- 解除变量的引用不仅有助于消除循环引用现象, 而且对垃圾收集也有好处. 为了确保有效地回收内存, 应该及时解除不再使用的全局对象、全局对象属性以及循环引用变量的引用
20.动画有哪些实现方法?
- Js
setTimeout、setInterval、requestAnimationFrame
requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画
jQuery中动画也比较实用 - css
animation - canvas元素结合JS
- 插件
例如 jQuery
21.浅拷贝
浅拷贝对原对象或副本的更改可能也会导致其他对象的更改。它实际上只拷贝了一层，并且只当数组和对象包的值是原始值时才会进行拷贝。
- 赋值运算符 =
let a=[1,2,3]
let b=a;
console.log(b==a)//true
- 扩展运算符 …
let a=[1,2,3]
let b=[...a]//把数组a的内容 挨个取出 放到b数组中
console.log(b===a) //true
- slice方法
let a=[1,2,3]
let b=a.slice()
console.log(a===b) //false
a[0]=4;
console.log(a)//4 2 3
console.log(b) //1 2 3
- assign方法
let a=[1,2,3]
let b=[]
Object.assign(b,a);
a[0]=4
console.log(a)//4 2 3
console.log(b) //1 2 3
- Array.from
let a=[1,2,3]
let b=Array.from(a)
a[0]=4
console.log(a)//4 2 3
console.log(b) //1 2 3
22.深拷贝
Javascript对象和数组如果深度嵌套，浅拷贝只能实现第一层的拷贝，但是深度的值依然和原对象共享引用。
let a=[ [1],[2], [3]]
let b=[...a] //浅拷贝
a[0][0]= 4
console.log(a) // [[4],[2],[3]]
consle.log(b) // [[4],[2],[3]] 对象b也被改变了 这时浅拷贝的弊端体现出来了
- 使用JSON
let a=[ [1],[2], [3]]
let b=JSON.parse(JSON.stringfy(a));
a[0][0]=4;
console.log(a) // [ [4],[2], [3]]
console.log(b) // [ [1],[2], [3]]
- structuredClone
let a=[ [1],[2], [3]]
let b=structuredClone(a);
a[0][0]=4;
console.log(a) // [ [4],[2], [3]]
console.log(b) // [ [1],[2], [3]]
- 第三方库 lodasg、rfdc
- 自定义函数实现
const deepCopy=(obj)=>{
if(typeof obj !=='object' || obj == null){
return obj;
}
const newObj= Array.isArray(obj) ? []:{};
Object.keys(obj).forEach((key)=>{
newObj[key]=deepCopy(obj[key]);
})
return newObj;
}
上述代码只能处理对象和数组的深度拷贝
注意理解深拷贝和浅拷贝的区别
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模板
<template v-if="condition"> <div v-for="item in list"></div> </template>
5.ref是什么
- 作用： 用来快速获取dom的，而不用document.getElement*（）
- 使用示例：
<img ref="imgref" src="\*\*" id= "img" >原生js：
document.getElementById("img")
vue:
this.$refs.imgs
6.nextTick是什么
- 作用：获取更新后的dom内容
例如：
<div ref="box" @click="change">{{content}}</div>
...
data(){
return {
content:"old"
}
}
methods:{
change(){
this.str="new";
console.log(this.$refs.box.innerText);//输出old ref中的dom数据未来得及更新
this.$nextTick(()=>{
console.log(this.$refs.box.innerText);//输出new
})
}
}
7.scoped 原理
- 作用：让样式在本组件中生效，不影响其他组件
- 原理：给组件节点新增自定义属性，然后css根据属性选择器添加样式，类似于下面…
<style>
div[data-v-xxx]{
background:red;
}
</style>
...
<div data-v-xxx>sss</div>
<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"<style scoped lang="scss"> $color: red; .warn{ color: $color; } </style>2.3 scss样式穿透
父元素 /deep/ 子元素 { 新样式 }例如 修改第三方插件的样式
3. stylus
3.1 下载
npm install stylus stylus-loader --svae
3.2 添加lang属性
<style lang="stylus" scoped> </style>
3.3 stylus样式穿透 [两种方式 deep 或者 >>> ]<style scoped lang="stylus"> 父元素 /deep/ 子元素 { 新样式 } 父元素 >>> 子元素 { 新样式 } </style>
9.组件的传值
- 父组件传值给子组件
- 父组件
<Child :data="msg"></Child>
msg和data里面的变量名一致- 子组件
<div>{{data}}</div> export default{ //1. 数组 props:['data'] //2. 对象 props:{ data:String } }
- 子组件传值到父组件
- 子组件
this.$emit("eventName",value);- 父组件 在组件中使用 @事件名 绑定子组件的事件到函数
<div @eventName="getVal"></div> ... methods:{ getVal(msg){ this.content=msg; //msg就是子组件传递的内容 } }
- 兄弟组件之间的传值
通过中转站 eventBus
- 创建bus.js
import Vue from 'vue' export default new Vue;
- 发送
import bus from '@/bus' bus.$emit("toBrother",value);
- 接收
import bus from '@/bus' mounted(){ bus.$on("toBrother",(data)=>{ this.data=data; //data就是其他兄弟节点传递过来的 }) }
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
module.exports = { publicPath:'./', devServer: { proxy: 'http://localhost:3000' // 打包完成后不生效 } }
- 使用时url 不加前面的ip段 直接写接口 如/login
- 如果是开发模式 devServer不适用 会打包后出现异常
13. Vue打包路径和路由模式
打包路径配置
vue.config.js
module.exports = {
publicPath:'./', // 默认为 / 打包后css js等文件的引入地址前缀
}
路由模式：history[默认]，hash #
前端如果自己测试项目，用hash
项目上线要求是 history模式，该怎么办？
交给后端进行重定向
14.代理和环境变量
开发环境 .env.development
VUE\_APP\_TITLE=
VUE\_APP\_ENV='dev'
VUE\_APP\_BASE\_API="http:localhost:3000/"
生产环境 .env.production
VUE\_APP\_TITLE=
VUE\_APP\_ENV='pro'
VUE\_APP\_BASE\_API="http:127.0.0.1:3000/"
在axios封装的时候其base_url
let base_url=""
if(process.env.VUE\_APP\_ENV=='pro'){
base_url=process.baseApi+url;
}else{
// dev模式可以通过代理去访问 直接为默认的url即可
base_url=url;
}
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路径传值
显式传值
==>localhost:8080/about?a=1;
this.$router.push({
path:'/about',
query:{
a:1
}
})
this.$router.push({
path:'/about?a=1'
})
使用query接收值
this.$router.query.a
隐式传值
this.$router.push({
name:'/About',
params:{a:1}
})
接收：
this.$router.params.a
20.vue 中遍历全局的方法有哪些？
- 普通遍历，对象.forEach()
arr.forEach(function(item,index,arr){
console.log(item,index)
})
- 对元素统一操作 对象.map()
var newarr = arr.map(function(item){
return item+1
})
3.查找符合条件的元素 对象.filter()
arr.filter(function(item){
if(item > 2){
return false
}else{
return true
}
})
4.查询符合条件的元素，返回索引 对象.findindex()
arr.finindex(function(item){
if(item>1){
return true
}else{
return false
}
})
- 对象.evening() 遇到不符合的对象会停止
- 对象.some() 找到符合条件的元素就停止
21. vue 的过滤器怎么使用？
vue 的特性，用来对文本进行格式化处理
使用它的两个地方，一个是插值表达式，一个是 v-bind
分类：
- 全局过滤器
Vue.filter('add',function(v){
return v < 10 ? '0' + v : v
})
<div>{{33 | add}}</div>
- 本地过滤器
和 methods 同级
filter:{
add:function(v){
return v < 10 ? '0' + v : v
}
}
22.如何封装一个组件？
- 使用 Vue.extend()创建一个组件
最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
=>localhost:8080/about?a=1;
this.
r
o
u
t
e
r
.
p
u
s
h
(
p
a
t
h
:
′
/
a
b
o
u
t
′
,
q
u
e
r
y
:
a
:
1
)
t
h
i
s
.
router.push({ path:'/about', query:{ a:1 } }) this.
router.push(path:′/about′,query:a:1)this.router.push({
path:‘/about?a=1’
})
使用query接收值
this.$router.query.a
隐式传值
this.$router.push({
name:'/About',
params:{a:1}
})
接收：
this.$router.params.a
---
### 20.vue 中遍历全局的方法有哪些？
1. 普通遍历，对象.forEach()
arr.forEach(function(item,index,arr){
console.log(item,index)
})
2. 对元素统一操作 对象.map()
var newarr = arr.map(function(item){
return item+1
})
3.查找符合条件的元素 对象.filter()
arr.filter(function(item){
if(item > 2){
return false
}else{
return true
}
})
4.查询符合条件的元素，返回索引 对象.findindex()
arr.finindex(function(item){
if(item>1){
return true
}else{
return false
}
})
5. 对象.evening() 遇到不符合的对象会停止
6. 对象.some() 找到符合条件的元素就停止
---
### 21. vue 的过滤器怎么使用？
vue 的特性，用来对文本进行格式化处理
使用它的两个地方，一个是插值表达式，一个是 v-bind
分类：
1. 全局过滤器
Vue.filter(‘add’,function(v){
return v < 10 ? ‘0’ + v : v
})
2. 本地过滤器
和 methods 同级
filter:{
add:function(v){
return v < 10 ? ‘0’ + v : v
}
}
---
### 22.如何封装一个组件？
1. 使用 Vue.extend()创建一个组件
### 最后
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
[外链图片转存中...(img-Gi99Ehi7-1715457736099)]
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
