前端面试题
Posted 丁少华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试题相关的知识，希望对你有一定的参考价值。
javascript
1、请问截至目前JS中的基本数据类型有几种？
A、5 B、6 C、7 D、8
2、document对象模型中，节点类型一共有几种？
A、4种 B、12种 C、10种 D、6种
3、document对象模型中，文档根节点、元素节点、注释节点的节点类型分别是多少？
A、8，4，1 B、4，6，5 C、9，1，2 D、1，2，3
4、如下代码，哪个执行能获取到hello得文本节点
<body>hello</body>
A. document.body.children[0]; B. document.body.child
C. document.body.childNodes[0] D. document.body.firstChildren
5、下面代码的输出是什么？
let a = 666;
let b = new Number(666);
let c = 666;
console.log(a == b);
console.log(a === b);
console.log(b === c);
A: true false true B: false false true C: true false false D: false true true
6、以下程序，打印的结果是？
async function getTeacher()
return "hello";
;
const res = getTeacher();
console.log(res);
A. Promise B. hello
7、以下程序，打印的结果是？
const obj1 =
uname:\'小红\'
const obj2 =
age: 20
const res = Object.assign(obj1, obj2);
console.log(res, obj1, obj2);
A. uname:\'小红\', age: 20, uname:\'小红\', age: 20
B. uname:\'小红\', age: 20, uname:\'小红\',age: 20, uname:\'小红\', age: 20
C. uname:\'小红\', age: 20, uname:\'小红\', age: 20, age: 20
D. uname:\'小红\', age: 20, uname:\'小红\', uname:\'小红\', age: 20
8、运行以上程序，在提示对话框中输入“4”，打印结果是？
var x=prompt("请输入1-5的数字","");
switch (x)
case "1": console.log("one");
case "2": console.log("two");
case "3": console.log("three");
case "4": console.log("four");
case "5": console.log("five");
default: console.log("none");
A、four,none B、four,five,none C、five D、five,none
9、以下代码执行后输出的结果是？
setTimeout(()=>
console.log(1);
);
var data = ;
for (var i = 0; i < 10; i++)
data[i] = function()
console.log(i);
;
;
var p = new Promise((res,rej)=>
console.log(2);
res(3);
);
p.then(data=>
console.log(data);
)
console.log(data[\'8\']());
A. 1，2，3，undefind, 8 B. 2，3，8，1 C. 2，8，3，1 D. 2，10，undefind，3，1 E. 2，10，3，1
10、如下代码，哪个选项执行会报错
const MENU =
\'FE\':\'前端开发工程师\',
\'DEV\':\'后端开发工程师\',
\'QA\':\'测试开发工程师\'
;
function getTestScore(...args)
const [userInfo = , type = \'FE\'] = args;
const userId = userInfo;
console.log(`我的名字叫$userId，职位是$MENU[type]`);
;
A. getTestScore() B. getTestScore(\'DEV\') C. getTestScore(null,\'QA\') D. getTestScore(\'\')
11、下面代码的输出是什么？
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
A、[1, 2, 3, null× 7, 11] B、[1, 2, 3, 11] C、[1, 2, 3, empty × 7, 11] D、 SyntaxError
- 下面代码的输出是什么？
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
A、 1 1 2 B、1 2 2 C、 0 1 2 D、0 2 2
13、以下代码执行结果是？
const obj = 9: "d", 8: "e", 7: "f" ;
const set = new Set([9, 8,7]);
obj.hasOwnProperty("9");
obj.hasOwnProperty(9);
set.has("9");
set.has(9);
A、false true false true B、 false true true true
C、true true false true D、true true true true
14、以下代码输出结果是？
function Foo()
getName = function ()
console.log(1);
;
return this;
Foo.getName = function ()
console.log(2);
Foo.prototype.getName = function ()
console.log(3);
;
var getName = function ()
console.log(4);
;
function getName()
console.log(5);
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
A、4 2 1 1 2 3 3 B、2 1 4 1 2 3 3
C、2 4 1 1 3 2 3 D、2 4 1 1 2 3 3
15、[3,2,6,1,7] 冒泡排序的次数？
A、5 B、10 C、15 D、25
16、如下代码，选择输出结果？
class Father
sex = "男";
msg = "i am father";
msg1 = "test";
constructor(name, age)
console.log("Father c");
this.name = name;
this.age = age + 1;
this.city = "北京";
speak()
console.log("哈哈");
class Son extends Father
msg = "i am son";
city = "河南";
constructor(name, age, sex, color)
console.log("Son c");
super(name, age);
super.speak();
this.color = color;
const son = new Son("小明", 20, "女", "red");
console.log(son instanceof Son, son instanceof Father, son);
A、Son c，Father c，哈哈, name: \'小明\', age: 21，sex: \'男\', msg: \'i am son\', msg1: \'test\'，color: "red",city: "河南",true,true
B、Son c， name: \'小明\', age: 21，sex: \'男\', msg: \'i am father\', msg1: \'test\',color: "red",city: "河南", true,false
C、Son c， name: \'小明\', age: 21，sex: undefined, msg: \'i am father\', msg1: undefined,color: "red",city: "河南", true,false
D、Son c，Father c，语法报错, name: \'小明\', age: 21，sex: \'男\', msg: \'i am father\', msg1: \'test\'，color: "red",city: "河南",true,true
17、如下代码，选择输出结果？
class Person
static eat()
console.log("eat");
speak()
console.log("speak");
constructor()
this.say = function ()
console.log("say");
;
Person.work = function ()
console.log("work");
;
Person.prototype.speak = function ()
console.log("speak1");
;
const person = new Person();
person.say();
person.speak();
person.work();
person.eat();
A、say, speak,work,eat B、say, speak1,work,eat
C、say, speak1,报错异常,eat D、say, speak,work,报错异常 E、say, speak,报错异常,eat
18、js方法重载相关问题，如下代码，选择输出结果？
function Person(name,age)
this.name = name;
this.age = age
function Person(name)
this.name = name;
const person1 = new Person(\'小红\');
const person2 = new Person(\'小白\', 20);
console.log(person1, person2)
A、小红,undefined,小白,20 B、小红 ,小白 C、小红,小白,undefined
19、类型比较，根据如下代码，做出选择？
const obj1 = ;
const obj2 = ;
const num1 = 1;
const num2 = new Number(1);
console.log(obj1 == obj2, obj1 === obj2, num1 == num2, num1 === num2);
console.log(typeof num1, typeof num2);
A、true,true,true,true,\'number\',\'number\'
B、true,false,true,true,\'number\',\'Number\'
C、false,false,true,true,\'Number\',\'Number\'
D、false,false,true,false,\'number\',\'Object\'
E、true,false,true,false,\'number\',\'Object\'
20、es6+基础知识点考察，以下执行结果是？
const target =
id: "abc",
;
const handler = ;
const proxy = new Proxy(target, handler);
proxy.id = \'def\'
console.log(proxy.id, target.id);
A、abc,abc D、def,def C、abc,def D、def,abc
http相关
1、在https://baidu.com的页面中，以下哪些情况会导致跨域（多选）？
A 发起http://baidu.com/api接口调用 B 发起https://google.com/api接口调用
C 发起https://域名对应的ip/api接口调用 D 发起https://api.baidu.com/xxx接口调用
E 发起https://baidu.com:8080/api接口调用
2、关于cors跨域解决技术中，以下哪块代码操作会触发预请求行为（最新版chrome除外）？
// A
axios.get("http://dshvv.com:7777/test",
headers: token: "abcdefg" ,
);
// B
axios.get("http://dshvv.com:7777/test",
headers: "Content-Language": "zh-CN" ,
);
// C
axios.delete("http://dshvv.com:7777/test");
// D
axios.get("http://dshvv.com:7777/test");
3、关于jsonp的说法正确的是？
A 不会遵守同源策略 B 支持get和post请求 C 请求地址可以写在script的src、link的href
D callback函数可以定义在<script src=\'xxx\'/>请求之后
4、跨域除了造成接口调用有问题外，还有哪些不好的地方（多选）？
A 无法读取非同源网页的 Cookie
B 无法读取非同源网页的LocalStorage
C 无法读取非同源网页的IndexedDB
D 无法接触非同源网页的 DOM
5、在vue cli创建的项目中，其本地跨域解决方案的原理是？
A cors B jsonp C 服务器代理
6、跨域行为会发生在服务上吗？
A 会 B 不会
7、关于请求头，以下哪些字段不可以被手动赋值（多选）？
A origin B referer C cookie D Accept-Language
8、fetch可以通过设置mode:cors来解决跨域问题？
A 是 B 否
9、常见的405状态码代表什么？
A. 请求超时，服务器等待了过长的时间。
B. 不允许使用某些方法操作资源，例如不允许POST只能GET。
C. 资源无法满足客户端请求的条件，例如请求中文但只有英文。
D. 服务器禁止访问资源。
10、http请求位于TCP/IP网络分层模型中的哪一层？
A. 数据链路层。
B. 网络互连层。
C. 传输层。
D. 应用层。
11、 以下哪项表述错误:
A. HTTP最大的优点是简单、灵活和易于扩展；
B. HTTP拥有成熟的软硬件环境，应用的非常广泛，是互联网的基础设施；
C. HTTP是有状态的，可以轻松实现集群化，扩展性能；
D. HTTP是明文传输，数据完全肉眼可见，能够方便地研究分析，但也容易被窃听；
12、对于 HTTP 协议，下列描述正确的有
A. HTTP 协议是基于 TCP 协议的;
B. TCP 的重传机制会导致 HTTP 服务端收到重复的包，因而需要实现幂等;
C. HTTP 专门用来在两点之间传输数据，也能用于广播、寻址或路由。
D. HTTP 协议主要用来传输 HTML 网页;
13、以下哪项表述错误:
A. Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。
B. Get 请求能缓存，Post 不能;
C. Post、Get请求都可以通过 request body来传输数据；
D. URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的;
14、以下哪项表述错误:
A. DNS 是基于 TCP 做的查询。
B. HTTPS 还是通过了 HTTP 来传输信息，但是信息通过 TLS 协议进行了加密。
C. Post 支持更多的编码类型且不对数据类型限制。
D. CDN 位于浏览器和服务器之间，主要起到缓存加速的作用。
15、以下哪些是HTTP请求中浏览器缓存机制会用到的协议头？
A Last-Modified
B Etag
C Referer
D User-Agent
16、状态码描述错误的是：
A. 1××类状态码表示重定向。
B. 2××类状态码表示成功。
C. 4××类状态码表示客户端错误。
D. 5××类状态码表示服务器错误。
17、关于cookie说法错误的是
A. HTTP 协议是无状态的，主要是为了让 HTTP 协议尽可能简单，使得它能够处理大量事务。HTTP/1.1 引入 Cookie 来保存状态信息。
B. 它会在浏览器之后向同一服务器再次发起请求时被携带上，用于告知服务端两个请求是否来自同一浏览器。
C. Cookie 是用户浏览器发送服务器到并保存在本地的一小块数据，
D. 会带来额外的性能开销。
18、接下来部分题目会涉及到上次未考试的内容
下面代码的输出是什么？
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
A、[1, 2, 3, null× 7, 11] B、[1, 2, 3, 11] C、[1, 2, 3, empty × 7, 11] D、 SyntaxError
19、下面代码的输出是什么？
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
A、 1 1 2 B、1 2 2 C、 0 1 2 D、0 2 2
20、以下代码执行结果是？
const obj = 9: "d", 8: "e", 7: "f" ;
const set = new Set([9, 8,7]);
obj.hasOwnProperty("9");
obj.hasOwnProperty(9);
set.has("9");
set.has(9);
A、false true false true B、 false true true true
C、true true false true D、true true true true
21、以下代码执行后输出的结果是？
setTimeout(()=>
console.log(1);
);
var data = ;
for (var i = 0; i < 10; i++)
data[i] = function()
console.log(i);
;
;
var p = new Promise((res,rej)=>
console.log(2);
res(3);
);
p.then(data=>
console.log(data);
)
console.log(data[\'8\']());
A. 1，2，3，undefind, 8 B. 2，3，8，1 C. 2，8，3，1 D. 2，10，undefind，3，1 E. 2，10，3，1
22、如下代码，哪个选项执行会报错
const MENU =
\'FE\':\'前端开发工程师\',
\'DEV\':\'后端开发工程师\',
\'QA\':\'测试开发工程师\'
;
function getTestScore(...args)
const [userInfo = , type = \'FE\'] = args;
const userId = userInfo;
console.log(`我的名字叫$userId，职位是$MENU[type]`);
;
A. getTestScore() B. getTestScore(\'DEV\') C. getTestScore(null,\'QA\') D. getTestScore(\'\')
typescript
题目共有20题，其中有1/2是typescript相关，其余是js和http相关
1、抽象类和接口的区别是？
A 抽象类不能做只能声明成员，不能做有具体的实现及赋值
B 接口只能声明成员，不能做有具体的实现实现及赋值
C 抽象类和接口均可以有成员的声明，也可以对其实现实现及赋值
D 抽象类和接口均不可对成员的具体实现实现及赋值
2、关于可见性修饰符，在没有指定的情况下，类成员的修饰符默认是？
A protected B public C private
3、如下，哪块代码可以编译通过（多选）？
// A
class People protected uname = \'人类\'
console.log(new People().uname);
// B
class People private uname = \'人类\'
console.log(new People().uname);
// C
class People public uname = \'人类\'
console.log(new People().uname);
// D
class People uname = \'人类\'
console.log(new People().uname);
4、关于可见性修饰符，下列描述正确的是？
A 子类可以访问父类的private所修饰的成员
B 接口可以用使用public修饰符
C 子类可以访问父类的protected所修饰的成员
D 抽象类不可以使用可见性修饰符
5、关于抽象类和接口描述正确的是？
A 抽象类和接口中都可以有构造方法
B 抽象类和接口中均可以包含静态方法
C 接口实现类必须实现父类全部抽象方法，而抽象类则可以部分实现
6、以下代码，哪块可以编译通过？
class Utils // A
add(x,y) return x+y;
static test(x,y) this.add(x,y);
console.log(Utils.test(1,2));
class Utils // B
static add(x,y) return x+y;
test(x,y) Utils.add(x,y);
console.log(new Utils().test(1,2));
class Utils // C
static add(x,y) return x+y;
test(x,y) Utils.add(x,y);
console.log(Utils().test(1,2));
class Utils // D
add(x,y) return x+y;
static test(x,y) this.add(x,y);
console.log(new Utils().test(1,2));
7、关于泛型描述正确的是？
A 泛型只可以用来约束变量 B 泛型接可以用来约束变量也能用在函数上，但是不能用来约束类
C 泛型可以用在变量、函数和类上
8、interface和type区别，描述正确的是？
A interface可以被继承，但type不可以
B interface可用来描述对象和函数，而type只能描述对象
C type和interface均可用交叉&来实现扩展
D interface和type如果重复定义，声明均可自动被合并
9、关于枚举，以下说法错误的是（多选）？
A 枚举声明之后需要对其进行初始化赋值
B 枚举可以用const修饰
C 枚举值能是表达式
D 枚举值只能是字符串
10、如下代码，执行后的结果为？
enum E A, B, C=5, D
console.log(E.A, E.B, E.C, E.D, );
A 语法报错，需要赋值 B undefined undefined 5 undefined
C 0 1 2 3 D 0 1 5 6 E undefined undefined 5 6
11、关于装饰器，下列说法错误的是（多选）？
A 装饰器只能修饰类，不能修饰方法
B 装饰器能修饰类也能修饰方法，但是不能修饰属性
C 装饰器既能修饰属性也能方法、类
D 一个目标对象上支持多个装饰器叠加使用
12、如下代码，哪个执行能获取到hello得文本节点
<body>hello</body>
A. document.body.children[0]; B. document.body.child
C. document.body.childNodes[0] D. document.body.firstChildren
13、下面代码的输出是什么？
let a = 666;
let b = new Number(666);
let c = 666;
console.log(a == b);
console.log(a === b);
console.log(b === c);
A: true false true B: false false true C: true false false D: false true true
14、以下程序，打印的结果是？
async function getTeacher()
return "hello";
;
const res = getTeacher();
console.log(res);
A. Promise B. hello
15、以下代码执行后输出的结果是？
setTimeout(()=>
console.log(1);
);
var data = ;
for (var i = 0; i < 10; i++)
data[i] = function()
console.log(i);
;
;
var p = new Promise((res,rej)=>
console.log(2);
res(3);
);
p.then(data=>
console.log(data);
)
console.log(data[\'8\']());
A. 1，2，3，undefind, 8 B. 2，3，8，1 C. 2，8，3，1 D. 2，10，undefind，3，1 E. 2，10，3，1
16、如下代码，哪个选项执行会报错
const MENU =
\'FE\':\'前端开发工程师\',
\'DEV\':\'后端开发工程师\',
\'QA\':\'测试开发工程师\'
;
function getTestScore(...args)
const [userInfo = , type = \'FE\'] = args;
const userId = userInfo;
console.log(`我的名字叫$userId，职位是$MENU[type]`);
;
A. getTestScore() B. getTestScore(\'DEV\') C. getTestScore(null,\'QA\') D. getTestScore(\'\')
17、下面代码的输出是什么？
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
A、 1 1 2 B、1 2 2 C、 0 1 2 D、0 2 2
18、在https://baidu.com的页面中，以下哪些情况会导致跨域（多选）？
A 发起http://baidu.com/api接口调用 B 发起https://google.com/api接口调用
C 发起https://域名对应的ip/api接口调用 D 发起https://api.baidu.com/xxx接口调用
E 发起https://baidu.com:8080/api接口调用
19、关于cors跨域解决技术中，以下哪块代码操作会触发预请求行为（最新版chrome除外）？
// A
axios.get("http://dshvv.com:7777/test",
headers: token: "abcdefg" ,
);
// B
axios.get("http://dshvv.com:7777/test",
headers: "Content-Language": "zh-CN" ,
);
// C
axios.delete("http://dshvv.com:7777/test");
// D
axios.get("http://dshvv.com:7777/test");
20、关于jsonp的说法正确的是？
A 不会遵守同源策略 B 支持get和post请求 C 请求地址可以写在script的src、link的href
D callback函数可以定义在<script src=\'xxx\'/>请求之后
css
1、以下代码，哪个选项的描述正确（多选）？
<style>
.div1>span color: red; /* A 可以让 测试1 字体颜色变红 */
[data-id="test"] color: red; /* B可以让 测试2 字体颜色变红 */
.div2+spancolor: red; /* C可以让 测试2-span 字体颜色变红 */
.div3 span:nth-of-type(0) color: red; /* D可以让 测试3 字体颜色变红 */
</style>
<div class="div1">
<span>测试1</span>
</div>
<div class="div2" data-id="test">测试2</div>
<span>测试2-span</span>
<div class="div3">
<span>测试3</span>
</div>
2、关于css选择器优先级排序正确的是？
A ID>类>属性>标签 B 类>ID>属性>标签 C 属性>类>ID>标签
D 标签>属性>ID>类 E 标签>ID>类>属性
3、css两种盒子模型描述正确的是？
A 盒模型由content、margin、padding组成
B ie盒模型的conten包含padding+margin+border
C box-sizing:border-box为IE盒子模型
D box-sizing属性有两种可选值content-box|border-box
4、关于弹性盒子，以下描述正确的是？
A justify-content: center代表当前元素元素水平居中
B align-items: center代表子元素水平居中
C justify-content:space-between子元素紧挨两测均匀分布
D justify-content:space-around子元素紧挨两测均匀分布
5、::before 和 :after中双冒号和单冒号有什么区别？
A 单冒号表示伪类，双冒号表示伪元素
B 双冒号表示伪类，单冒号表示伪元素
6、关于less的基本使用，下列描述正确的是？
A less的变量使用$定义
B less复用性：支持混入技术，但不支持继承技术
C less支持各种算术运算，如+-*/
D less能够被浏览器直接识别
7、在less和cssMoudle情况下，如何不污染全局去修改页面组件中antd的组件样式（简答）？
8、使用less语法，按照要求补充代码？
a
/* 在此编写，当hover的时候，字体变红 */
9、请问截至目前JS中的基本数据类型有几种？
A 5 B 6 C 7 D 8
10、document对象模型中，节点类型一共有几种？
A、4种 B、12种 C、10种 D、6种
11、document对象模型中，文档根节点、元素节点、注释节点的节点类型分别是多少？
A、8，4，1 B、4，6，5 C、9，1，2 D、1，2，3
12、抽象类和接口的区别是？
A 抽象类不能做只能声明成员，不能做有具体的实现及赋值
B 接口只能声明成员，不能做有具体的实现实现及赋值
C 抽象类和接口均可以有成员的声明，也可以对其实现实现及赋值
D 抽象类和接口均不可对成员的具体实现实现及赋值
13、关于可见性修饰符，在没有指定的情况下，类成员的修饰符默认是？
A protected B public C private
14、如下，哪块代码可以编译通过（多选）？
// A
class People protected uname = \'人类\'
console.log(new People().uname);
// B
class People private uname = \'人类\'
console.log(new People().uname);
// C
class People public uname = \'人类\'
console.log(new People().uname);
// D
class People uname = \'人类\'
console.log(new People().uname);
15、在https://baidu.com的页面中，以下哪些情况会导致跨域（多选）？
A 发起http://baidu.com/api接口调用 B 发起https://google.com/api接口调用
C 发起https://域名对应的ip/api接口调用 D 发起https://api.baidu.com/xxx接口调用
E 发起https://baidu.com:8080/api接口调用
16、关于cors跨域解决技术中，以下哪块代码操作会触发预请求行为（最新版chrome除外）？
// A
axios.get("http://dshvv.com:7777/test",
headers: token: "abcdefg" ,
);
// B
axios.get("http://dshvv.com:7777/test",
headers: "Content-Language": "zh-CN" ,
);
// C
axios.delete("http://dshvv.com:7777/test");
// D
axios.get("http://dshvv.com:7777/test");
17、如下代码，哪个执行能获取到hello得文本节点
<body>hello</body>
A. document.body.children[0]; B. document.body.child
C. document.body.childNodes[0] D. document.body.firstChildren
18、下面代码的输出是什么？
let a = 666;
let b = new Number(666);
let c = 666;
console.log(a == b);
console.log(a === b);
console.log(b === c);
A: true false true B: false false true C: true false false D: false true true
19、以下程序，打印的结果是？
async function getTeacher()
return "hello";
;
const res = getTeacher();
console.log(res);
A. Promise B. hello
20、以下程序，打印的结果是？
const obj1 =
uname:\'小红\'
const obj2 =
age: 20
const res = Object.assign(obj1, obj2);
console.log(res, obj1, obj2);
A. uname:\'小红\', age: 20, uname:\'小红\', age: 20
B. uname:\'小红\', age: 20, uname:\'小红\',age: 20, uname:\'小红\', age: 20
C. uname:\'小红\', age: 20, uname:\'小红\', age: 20, age: 20
D. uname:\'小红\', age: 20, uname:\'小红\', uname:\'小红\', age: 20
vue
1、在 <script setup> 中，编译器宏都有哪些？以及简单描述一下什么是编译器宏。
2、描述一下上题中每个编译器宏的作用？
3、vue2和vue3编写和使用插件的区别是什么，以编写一个弹窗插件为例？
4、在使用keep-alive的前提下，两个页面切换，正在播放音乐的页面如果被切走，音乐会中断还是后台播放？并简述原因？
5、在vue3的混合式api的组件中，可以利用[混合式函数 composables]来提高组件复用和抽离，请简单编写一个demo？
6、vue2和vue3中，插槽的使用有哪些变化？
7、vue3新增的Teleport是做什么的，以及如何使用？
8、在vue3中，以下代码是否正确？
// 创建构造器
const Profile = Vue.extend(
template: \'<p>firstName lastName</p>\',
data()
return
firstName: \'Walter\',
lastName: \'White\'
)
A、正确 B、不正确
9、vue3中，定义响应式数据的关键字react和ref的区别是什么？
10、vue3中如何监听路由变化。写出demo？
11、在vue3中，vuex变得不在好用，反而推荐Pinia。在我们目前项目中也是用的此插件，请简单描述下如何使用或编写一个demo？
12、vite搭建的vue项目，和我们传统用vue cli创建的项目，有什么区别。简单描述？
13、vue-router中，route和router 的区别？
14、vue是否是双向数数据流，解释下单/双向数据流的区别和优劣？
15、vue首屏加载过于缓慢，以至于过长时间白屏，怎么解决？
16、在vue2如下代码，点击按钮。新增的属性会出现在页面上吗（如果没出现，请说明原因和方案）？另外打印值是多少？如果是vue3，又是如何？
<template>
<div>
<div v-for="value in obj" :key="value"> value </div>
<button @click="addObjB">添加obj.b</button>
</div>
</template>
<script>
export default
data ()
return obj: a: \'obj.a\'
,
methods:
addObjB ()
this.obj.b = \'obj.b\'
console.log(this.obj)
</script>
17、v-for中，key的作用是？
18、如下代码，会出现什么问题，改如何处理？
<div id="app">
<select>
<my-option></my-option>
</select>
</div>
<script>
Vue.component("MyOption",
template: "<option>选项一</option>",
);
var app = new Vue(
el: "#app",
);
</script>
以上是关于前端面试题的主要内容，如果未能解决你的问题，请参考以下文章
面试题系列|前端面试题前端高频面试题总结（2021年最新版）