程序员的资源宝库

网站首页 > gitee 正文

前端面试题（前端面试题2023）

sanyeah 2024-04-01 11:18:09 gitee 5 ℃ 0 评论

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

  1. 下面代码的输出是什么？
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+span{color: 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>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表