前端笔试题涉及html、css、js、Vue 等

2022-08-17  本文已影响0人  JadeTsujiSan

综合题

你觉得前端工程师的价值体现在哪？

什么是w3c标准，谈谈对w3c的理解？

答： 如果从WEB技术角度，可以分为三个方面的标准：结构、表现、行为。结构主要指(X)HTML标准，包括各种标签的名字、属性、语义及其他相关标准。表现主要指CSS，包括各种定位、颜色、大小等方面的标准。行为主要指Javascript，其实主要由ECMA国际制定的标准，但由于在万维网上广泛应用，开发人员也要关注。Javascript的词法、表达式、语句等方面也有一系列的标准。 Javascript没有像Java JDK那样的现成二进制文件，只有文档标准，具体的实现交给了各浏览器，所以在开发过程中，各浏览器的兼容性问题会是一个问题，我们在处理的时候可以遵循鸭式辨型原则去处理。

1.从输入URL到浏览器显示页面发生了什么。（特别注意）

2.HTTP请求方式GET，POST的区别？

get请求：从服务端获取数据

特点：使用GET方法时，查询字符串（键值对）被附加在URL地址后面一起发送到服 务器： sevice/getValue&name1=value1

    GET请求能够被缓存

    GET请求会保存在浏览器的浏览记录中

    以GET请求的URL能够保存为浏览器书签

    GET请求有长度限制

    GET请求主要用以获取数据

post请求：提交数据给服务端处理，并返回响应

   特点： 使用POST方法时，查询字符串在http请求头中单独存在

    POST请求不能被缓存下来

    POST请求不会保存在浏览器浏览记录中

    以POST请求的URL无法保存为浏览器书签

    POST请求没有长度限制

3.防抖和节流的区别？

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行

节流：指定时间间隔内只会执行一次任务。

参考：JS-防抖与节流

4.页面重构怎么操作？

页面重构就是根据原有页面内容和结构的基础上，通过 div+css 写出符合 web 标准的页面结构。

具体实现要达到以下三点：

5. 谈谈你对SEO的理解？

SEO：搜索引擎优化，其目的是为了使网站能够更好的被搜索引擎抓取，提高在搜索引擎内的自然排名，从而带来更多的免费流量，获取收益

SEO主要有两种方法，站内优化和站外优化

参考：前端SEO优化

6.前端怎么控制管理路由？

路由就是浏览器地址栏中的 url 与所见网页的对应关系

前端路由的实现方式：

基于 hash（ocation.hash+hashchange事件）

展示层面也就是切换 # 后面的内容，呈现给用户不同的页面。现在越来越多的单页面应用，基本都是基于 hash 实现

特性：

基于 istory 新 API（ history.pushState()+popState 事件）
window.history.pushState(null, null, "http://www.google.com");

这两个 API 的相同之处是都会操作浏览器的历史记录，而不会引起页面的刷新。不同之处在于，pushState 会增加一条新的历史记录，而replaceState 则会替换当前的历史记录

参考：History API -MDN

7.平时如何管理你的项目？

a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

b. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

c. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

d. 页面进行标注（例如 页面 模块 开始和结束）；

e. CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

f. JS 分文件夹存放 命名以该JS功能为准的英文翻译。

g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

H5-CSS3笔试题

1.知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？

2.介绍HTML5的新特性?

onresize 事件会在窗口或框架被调整大小时发生。

ondrag 事件在元素或者选取的文本被拖动时触发。拖放是 HTML5 中非常常见的功能

3.如何解决ajax无法后退的问题？

4.websocket和ajax轮询?

5.web worker和websocket?

worker主线程：

websocket

6.Doctype作用？严格模式与混杂模式如果区分？意义？

7.Doctype多少种文档类型？

8.HTML与XHTML，有什么区别？

9.行内元素有哪些，块级元素有哪些，空(void)元素有那些?

行内元素：a span i img input select b 等

块级元素：div ul ol li h1~h6 p table 等

空元素： br hr link 等

10.常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解?

Trident 内核：IE

Gecko 内核：NETSCAPE6 及以上版本，火狐

Presto 内核：Opera7 及以上。[Opera 内核原为：Presto，现为：Blink;]

Webkit内核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

浏览器内核又可以分成两部分：渲染引擎和JS引擎****。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

11.如何实现浏览器内多个标签页之间的通信?

参考链接：多个标签页之间的通信

12.HTML5的离线存储怎么使用，解释一下工作原理

参考链接：HTML5的离线存储

13.src与href的区别

区别：src 用于替代这个元素，而 href 用于建立这个标签与外部资源之间的关系

<link href="style.css" rel="stylesheet" />浏览器加载到这里的时候，html 的渲染和解析不会暂停，css 文件的加载是同时进行的

<script src="script.js"></script>当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件

14.表单提交中Get和Post方式的区别

CSS方面：

1.flex属性值是多少？

2.垂直居中

flex布局

display: flex;
justify-content: center;
aligin-items: center;

3.清除浮动

浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。

1. 父容器结尾插入空标签

 <div style="clear: both;"></div>
  1. 利用css伪元素：

使用伪元素的好处：不增加冗余的 DOM 节点，符合语义化

.clearfix:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}

3.将父容器形成BFC

4.position的值， relative和absolute分别是相对于谁进行定位的？

5. css盒子模型，box-sizing属性的理解

css 的盒模型由 content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

box-sizing****: content-box|border-box|inherit:

6.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

7.transition 和 margin的百分比根据什么计算？

transition是相对于自身；margin相对于参照物

8.display:none和visibility:hidden的区别？

9.CSS中link 和@import的区别是？

10.px和em和rem的区别？

px****: 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em的值并不是固定的，会继承父级元素的字体大小，代表倍数

rem的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数

参考链接：px和em和rem的区别

11.什么是响应式设计，响应式设计的基本原理是什么？

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

12.为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS初始化往往会出现浏览器之间的页面显示差异 初始化样式会对 SEO* 有一定的影响*

13. CSS3有哪些新特性？

14.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）,双冒号是在当前规范中引入的，用于区分伪类和伪元素

15. 重绘和回流

参考链接：重绘和回流

16. css预处理器？

提供了一种css的书写方式，常见的就是 SAAS文档 和 LESS文档；

17.CSS优化、提高性能的方法有哪些？

18.对BFC规范的理解？

JS笔试题

1.严格模式的特性？

2.Promise是什么？

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.

语法：new Promise( function(resolve, reject) {...} /* executor */ );

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大.所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果 --------ES6****入门-阮一峰

Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

特点：

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
})

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

promise.then(function(value) {
  // success
}, function(error) {
  // failure
})

then 方法返回的是一个新的Promise实例

Promise.prototype.catch 用于指定发生错误时的回调函数,具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

catch 方法返回的还是一个 Promise 对象，因此后面还可以接着调用 then 方法

参考：ES6 --Promise 对象

3. JavaScript 有哪些数据类型

6种原始数据类型：

引用类型：Object、array、function

详见： JavaScript中的数据类型

4. undefined 和 null 有什么区别

null表示"没有对象"，即该处不应该有值

典型用法：

  1. 作为函数的参数，表示该函数的参数不是对象
  2. 作为对象原型链的终点

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义

典型用法：

  1. 变量被声明了，但没有赋值时，就等于undefined
  2. 调用函数时，应该提供的参数没有提供，该参数等于undefined
  3. 对象没有赋值的属性，该属性的值为undefined
  4. 函数没有返回值时，默认返回undefined

详见： undefined和null的区别-阮一峰

5.数组对象有哪些常用方法

修改器方法：

访问方法：

迭代方法：

更多方法请参考 MDN 传送门

6.Js 有哪几种创建对象的方式？

对象字面量

var obj = {}

Object 构造函数

var obj = new Object()

工厂模式

function Person(name, age) {
    var o = new Object()
    o.name = name;
    o.age = age;
    o.say = function() {
        console.log(name)
    }
    return o
}

缺点： 每次通过Person创建对象的时候，所有的say方法都是一样的，但是却存储了多次，浪费资源

构造函数模式

function Person(name, age) {
    this.name = name
    this.age = age
    this.say = function() {
        console.log(name)
    }
}
var person = new Person('hello', 18)

构造函数模式隐试的在最后返回return this 所以在缺少new的情况下，会将属性和方法添加给全局对象，浏览器端就会添加给window对象,可以根据return this 的特性调用call或者apply指定this

原型模式

function Person() {}
Person.prototype.name = 'hanmeimei';
Person.prototype.say = function() {
  alert(this.name);
}
Person.prototype.friends = ['lilei'];
var person = new Person();

实现了方法与属性的共享，可以动态添加对象的属性和方法。但是没有办法创建实例自己的属性和方法，也没有办法传递参数

构造函数和原型组合

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.say = function() {
    console.log(this.name)
}
var person = new Person('hello')

7.怎么实现对对象的拷贝(浅拷贝与深拷贝)？

浅拷贝

深拷贝

详见 JavaScript中的浅拷贝与深拷贝

8.什么是闭包，为什么要用它？

简单来说，闭包就是能够读取其他函数内部变量的函数
function Person() {
    var name = 'hello'
    function say () {
        console.log(name)
    }
    return say()
}
Person() // hello

由于 JavaScript 特殊的作用域，函数外部无法直接读取内部的变量，内部可以直接读取外部的变量，从而就产生了闭包的概念

用途：

最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

注意点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露

详见 JavaScript 中的闭包

9.介绍一下 JavaScript 原型，原型链，它们有何特点？

首先明确一点，JavaScript是基于原型的

每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.

原型链.png

图解：

那么什么是原型链：

JavaScript中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链

所有原型链的终点都是Object函数的prototype属性。Objec.prototype指向的原型对象同样拥有原型，不过它的原型是null，而null则没有原型

image.png

详见 JavaScript中的原型与原型链

10. JavaScript 如何实现继承？

function Animal() {}
Animal.prototype.name = 'cat'
Animal.prototype.age = 1
Animal.prototype.say = function() {console.log('hello')}

var cat = new Animal()

cat.name  // cat
cat.age  // 1
cat.say() // hello

最简单的继承实现方式，但是也有其缺点

  1. 来自原型对象的所有属性被所有实例共享
  2. 创建子类实例时，无法向父类构造函数传参
  3. 要想为子类新增属性和方法，必须要在new语句之后执行，不能放到构造器中
function Animal() {
    this.species = "动物"
}
function Cat(name, age) {
    Animal.call(this)
    this.name = name 
    this.age = age
}

var cat = new Cat('豆豆', 2)

cat.name  // 豆豆
cat.age // 2
cat.species // 动物

使用call或apply方法，将父对象的构造函数绑定在子对象上.

function Animal() {
    this.species = "动物"
}

function Cat(name){
  Animal.call(this)
  this.name = name
}

Cat.prototype = new Animal() // 重写原型
Cat.prototype.constructor = Cat

如果没有Cat.prototype = new Animal()这一行，Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal.这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat

ES6新增继承方式，Class 可以通过extends关键字实现继承
class Animal {

}

class Cat extends Animal {
    constructor() {
        super();
  }
}

使用 extends 实现继承，必须添加 super 关键字定义子类的 constructor，这里的super() 就相当于 Animal.prototype.constructor.call(this)

当然，还有很多种实现继承的方式，这里就不多说了。然后，再推荐一波 红宝书

详见 JavaScript中的继承

11.new 操作符具体干了什么？

12.同步和异步的区别，怎么异步加载 JavaScript？

同步模式

同步模式，又称阻塞模式。javascript 在默认情况下是会阻塞加载的。当前面的 javascript 请求没有处理和执行完时，会阻止浏览器的后续处理

异步模式

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理

异步加载 JavaScript

defer属性和async都是属于 script 标签上面的属性，两者都能实现 JavaScript 的异步加载。不同之处在于：async 在异步加载完成的时候就马上开始执行了，defer 会等到 html 加载完毕之后再执行

13.跨域问题的产生，怎么解决它？

由于浏览器的 同源策略，在出现 域名、端口、协议有一种不一致时，就会出现跨域，属于浏览器的一种安全限制。

解决跨域问题有很多种方式，常用的就是以下几种：

14.对 this 的理解？

在 JavaScript 中，研究 this 一般都是 this 的指向问题，核心就是 this**** 永远指向最终调用它的那个对象，除非改变 this 指向或者箭头函数那种特殊情况

1. obj.fun() -> this->obj

2. fun() 或(function(){ ... })() this->window

3. new fun() -> this->新对象

4. Student.prototype.intr=function(){ ... this.sname ...}

this-> 将来调用intr()的.前的子对象

function test() {
    console.log(this);
}

test() // window

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2
// 函数调用的环境不同，所得到的结果也是不一样的

15.apply()、call()和 bind() 是做什么的，它们有什么区别？

相同点：三者都可以改变 this 的指向

不同点：

var obj = {
    name : 'sss'
}
function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']);    // A sss B

var obj = {
    name: 'sss'
}
function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');       // C sss D

var obj = {
    name: 'sss'
}
function func() {
    console.log(this.name);
}
var func1 = func.bind(null, 'xixi');
func1();

apply、call 方法都会使函数立即执行，因此它们也可以用来调用函数

bind 方法不会立即执行，而是返回一个改变了上下文 this 后的函数。而原函数 func 中的 this 并没有被改变，依旧指向全局对象 window

bind 在传递参数的时候会将自己带过去的参数排在原函数参数之前

function func(a, b, c) {
    console.log(a, b, c);
}
var func1 = func.bind(this, 'xixi');
func1(1,2) // xixi 1 2

16.什么是内存泄漏，哪些操作会造成内存泄漏？

内存泄漏：是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束

可能造成内存泄漏的操作：

你可能还需要知道 垃圾回收机制

17.什么是事件代理，它的原理是什么？

事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理

原理：利用事件冒泡机制实现的

优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件

18.对ES6的了解

ECMAScript 6.0 是 JavaScript 语言的下一代标准

新增的特性：

了解更多，参考 ES6入门-阮一峰

19.箭头函数有什么特点

ES6 允许使用“箭头”（=>）定义函数
var f = v => v;
// 等同于
var f = function (v) {
  return v;
}

注意点：

20.async 函数以及 awit 命令

async 函数是什么？一句话，它就是 Generator 函数的语法糖

了解Generator函数的小伙伴，这里 传送门

async 特点：

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

async 函数内部 return 语句返回的值，会成为 then 方法回调函数的参数

async 函数返回的 Promise 对象，必须等到内部所有 await 命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到 return 语句或者抛出错误

async 函数内部抛出错误，会导致返回的 Promise 对象变为 reject 状态。抛出的错误对象会被 catch 方法回调函数接收到

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

await 命令: await 命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值

async function f() {
  // 等同于
  // return 123;
  return await 123;
}

f().then(v => console.log(v))
// 123

await 命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象.也就是说就算一个对象不是Promise对象，但是只要它有then这个方法， await 也会将它等同于Promise对象

使用注意点：

了解更多，参考：ES6 --async函数

21.export 与 export default有什么区别

export 与 export default 均可用于导出常量、函数、文件、模块等

在一个文件或模块中，export、import 可以有多个，export default 仅有一个

通过 export 方式导出，在导入时要加 { }，export default 则不需要

使用 export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名; export 加载的时候需要知道加载模块的变量名

export default 命令的本质是将后面的值，赋给 default 变量，所以可以直接将一个值写在 export default 之后

22.前端性能优化

参见 雅虎14条前端性能优化

23.对JS引擎执行机制的理解

首选明确两点：

JavaScript 是单线程语言

JavaScript 的 Event Loop 是 JS 的执行机制, 也就是事件循环

console.log(1)
setTimeout(function(){
    console.log(2)
},0)
console.log(3)
// 1 3 2

JavaScript 将任务分为同步任务和异步任务，执行机制就是先执行同步任务，将同步任务加入到主线程，遇到异步任务就先加入到 event table ，当所有的同步任务执行完毕，如果有可执行的异步任务，再将其加入到主线程中执行

setTimeout(function(){console.log(1);},0);
new Promise(function(resolve){
     console.log(2);
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log(3)
 });
 console.log(4);
 // 2 4 3 1

在异步任务中，定时器也属于特殊的存在。有人将其称之为 宏任务、微任务，定时器就属于宏任务的范畴。

参考 JS引擎的执行机制

24.DOM事件模型

事件的三个阶段

介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数？

在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

事件的代理/委托

vue笔试题

1. Vue 生命周期的理解

Vue 实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程。

期望答案（参考）：

beforeCreate、created（此时需说明可以在created中首次拿到data中定义的数据）、beforeMount、mounted（此时需说明dom树渲染结束，可访问dom结构）、beforeUpdate、updated、beforeDestroy、destroyed

2. 简述Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

[图片上传失败...(image-161c57-1660467001116)]

3.说一下 Vue 的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、 getter，在数据变动时发布消息给订阅者，触发相应监听回调。

4. 解释单向数据流和双向数据绑定

单向数据流：顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使 UI 发生变更就必须创建各种 action 来维护对应的 state。

双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度。

5. 对 MVC、MVVM 的理解?

MVC:

[图片上传失败...(image-f5a6c1-1660467001116)]

特点：

1.View 传送指令到 Controller；

2.Controller 完成业务逻辑后，要求 Model 改变状态；

3.Model 将新的数据发送到 View，用户得到反馈。

所有通信都是单向的。

MVVM:

[图片上传失败...(image-17ed6b-1660467001116)]

特点：

  1. 各部分之间的通信，都是双向的；
  2. 采用双向绑定： View 的变动，自动反映在 ViewModel，反之亦然。

6. 谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model 代表数据模型，数据和业务逻辑都在Model层中定义；

View 代表UI视图，负责数据的展示；

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

  1. 这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

  1. 组件通信

父****组件向子组件通信

子组件通过 props 属性，绑定父组件数据，实现双方通信。

子组件****向****父组件通信

将父组件的事件在子组件中通过 $emit 触发。

非父子组件、兄弟组件之间的数据传递

父传子：props；子传父：$emit；兄弟：eventbus；vuex；

/*新建一个Vue实例作为中央事件总嫌*/
let event =new Vue();
/*监听事件*/
event.$on(
'eventName', (val) => {
//......do something
});
/*触发事件*/
event.$emit(
'eventName'
, 
'this is a message.'
)

8.v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

9. vue-router 路由实现和传参的几种方式？

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

vue-router传递参数分为两大类

想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数。

命名路由

命名路由的前提就是在注册路由的地方需要给路由命名如：

path: '/a',

<u style="">name: 'a',</u>

component: () => import('../cs/a')

命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数时使用params

特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

//使用方法如下
this.$router.push({ name: 'a', params: { userId: 123 }})

//实列：
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="routerTo">click here to news page</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    routerTo(){
      this.$router.push({ name: 'a', params: { userId: 123 }});
    }
  }
}
</script>

//接受传递的参数：
<template>
  <div>
  接受参数{{this.$route.params.userId}}
  </div>
</template>

查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使用query。

注意：和name配对的是params，和path配对的是query

使用方法如下：
this.$router.push({ path: '/a', query: { userId: 123 }})

命名路由：

<router-link :to="{ name: 'a', params: { userId: 1111}}">click to news page</router-link>

路由传递参数和传统传递参数是一样的，命名路由类似表单提交而查询就是url传递，在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了，最后总结为以下两点：
1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

原文连接：Vue router传参的几种方式

10. route 和router 的区别

router 为 VueRouter 实例，想要导航到不同 URL，则使用router.push 方法。

$router是路由对象，专门执行跳转动作

$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。

$route 是封装地址栏信息的对象，是保存数据的，不执行操作。

11.计算属性 computed 和事件 methods 有什么区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的。

不同点：

关于：computed中的getter和setter。

问题描述：

很多情况，我问到这个问题的时候对方的回答都是vue的getter和setter、订阅者模式之类的回答，我就会直接说问的并不是这个，而是computed，直接让对方说computed平时怎么使用，很多时候得到的回答是computed的默认方式，只使用了其中的getter，就会继续追问如果想要再把这个值设置回去要怎么做，当然一般会让问到这个程度的这个问题他都答不上来了。

期待答案（参考）：

<!--直接复制的官网示例-->
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

12.Vue 中 key 的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

期望答案（参考）：

vue的dom渲染是虚拟dom，数据发生变化时，diff算法会只比较更改的部分，如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。举例说明：有一个列表我们现在在中间插入了一个元素，diff算法会默认复用之前的列表并在最后追加一个，如果列表存在选中一类的状态则会随着复用出现绑定错误的情况而不是跟着原元素，key的作用就可以给他一个标识，让状态跟着数据渲染。（具体的可以去查一下文档）

13. Vue 的核心是什么

数据驱动、组件系统。

14. Vue 等单页面应用的优缺点

优点

缺点

15. NextTick 是做什么的

nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的 DOM。

具体可参考官方文档：深入响应式原理(https://cn.vuejs.org/v2/guide/reactivity.html)。

期望答案（参考）：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。(官网解释)

解决的问题：有些时候在改变数据后立即要对dom进行操作，此时获取到的dom仍是获取到的是数据刷新前的dom，无法满足需要，这个时候就用到了$nextTick。

代码实例：
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})
// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

16.如何watch监听一个对象内部的变化。

watch 是一个对象，对象就有键，有值。

值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是变化前的值。

值也可以是函数名：不过这个函数名要用单引号来包裹。

值是包括选项的对象：选项包括有三个。

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

第二个是deep：其值是true或false；确认是否深入监听。deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器（受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除）

第三个是immediate：其值是true或false；immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

如果只是监听obj内的某一个属性变化，可以直接obj.key进行监听。

watch: {
    'obj.question': function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }

如果对整个obj深层监听

watch: {
    obj: {
        handler: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        },
        deep: true,
        immediate: true
    }
  }
上一篇 下一篇

猜你喜欢

热点阅读