Vue前端最新面试题（三）

DOM 事件有哪些阶段？谈谈对事件代理的理解

分为三大阶段：捕获阶段--目标阶段--冒泡阶段

事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如click)，再通过条件判断，执行事件触发后的语句(例如alert(e.target.innerHTML))

好处：(1)使代码更简洁；(2)节省内存开销

1.什么是组件

js组件就是把一系列的功能封装起来，包装成一个对象。比如一个表格组件，一个表单组件等等。一个组件必然包含了某种特定的职能，目的在于可以复用。

2.组件分类和使用

组件分为全局组件和局部组件.

全局组件使用：1.定义 2.使用

局部组件使用有三步：1.定义 2.注册 3.使用

全局组件

Vue.component("my-nav", {

template: "<ul><li v-for=item in arr>{{item}}</li></ul>",

// 自定义组件里面的数据一定要写成data函数并且有return 返回对象。

data() {

return {

arr: [1, 2, 3, 4, 5, 6]

}

}

});

1

<my-nav></my-nav>

局部组件的使用：

//定义组件

let search = {

template:<div>hello world</div>

};

let vm = new Vue({

el:#app,

data:{

},

//第二步 注册组件

components:{

search

}

})

<!--第三步，使用组件-->

<search></serarch>

3.组件嵌套

嵌套规则，子组件要在父组件上注册，父组件要到Vue实例上去注册。

例如：

let grandson = {

template: <div>grandson</div>

};

//grandson 组件要到父组件上注册

let son = {

template:<div>son<grandson></grandson></div>,

components:{

grandson,

}

};

let vm = new Vue({

el:#app,

data:{},

components:{

//son组件到到vm上去注册

son,

}

})

4.父组件向子组件传递消息

方法：props

let son = {

template:<div>我收到father{{money}}元</div>,

props:[money]

};

let father = {

template:<div>father 给你{{m}}<son :money="m"></son></div>,

components:{

son

},

data(){

return {m:500}

}

};

let vm = new Vue({

el:#app,

data:{

},

components:{father}

})

<div id="app">

<father></father>

</div>

5.子组件向父组件传递消息

方法 $emit

let son = {

props:[money],

template:<div>我收到老爸{{money}}<button @click= "getmore">多给一点</button></div>,

methods:{

getmore(){

this.$emit(more,1000);

}

},

}

let father = {

template:<div>父亲给了你{{m}} <son @more="givemore" :money="m" ></son></div>,

data(){

return {

m:500

}

},

methods:{

givemore(val){

this.m = val;

}

},

components:{

son

}

}

let vm = new Vue({

el:#app,

data:{

},

components:{

father

}

})

<div id="app">

<father></father>

</div>

目录结构

www：整个项目的根目录

order-www：订单模块根目录

config：配置目录

src：开发人员开发的目录

api：调用ajax的相关js

components：页面相关组件目录

router：路由目录

store：存放store目录

1、vue中 this.A = this.B会改变B的值怎么办

原因：这是一个引用传递而不是值传递，A、B指向的是同一个内存地址

解决办法：this.A = JSON.parse(JSON,stringify(this.B))（B转换成字符串，然后在转换成对象 ）

1、如何获取dom?

答：ref="domName" 用法：this.$refs.domName

2、说出几种vue当中的指令和它的用法？

答：v-model双向数据绑定；v-for循环 key值----给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点，高效的更新虚拟dom；

v-if v-show 显示与隐藏；

v-on事件；v-once: 只绑定一次。

3、如何让CSS只在当前组件中起作用？

<style scoped>

答：在组件中的style前面加上scoped

4、请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。

目录结构

build----配置

mock---前端模拟数据配置相关文件

public---前端静态资源文件

src----项目源文件

api----HTTP请求接口数据

assets----前端主题、字体、图片等资源文件

components----全局组件

directive----全局指令

filters----全局过滤器

icons----公共图标资源

layout----布局相关组件

router---路由配置相关文件

store----数据状态管理文件

styles---css样式文件

utils----公共方法

vendor----第三方js库资源

view----相关页面组件

App.vue ---项目的根组件

main.js----入口文件

permission.js----权限相关配置

5、Vue中双向数据绑定是如何实现的？

答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

6、单页面应用和多页面应用区别及优缺点

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：

不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

7、v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。

如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

附加知识点：在v-for遍历中，都需要声明：key，那么:key的作用是什么呢？

答：vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

假设1、 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。

假设2、 同一层级的一组节点，他们可以通过唯一的id进行区分。

简单的说， :key的作用主要是为了高效的更新虚拟DOM

8、vue常用的修饰符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；

.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

.capture：与事件冒泡的方向相反，事件捕获由外到内；

.self：只会触发自己范围内的事件，不包含子元素；

.once：只会触发一次。

9、vue的两个核心点

答：数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

10、vue和jQuery的区别

答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

11、引进组件的步骤

答: 在template中引入组件；

在script的第一行用import引入路径；

用component中写上组件名称。

12、Vue-router跳转和location.href有什么区别

答：使用location.href=/url来跳转，简单方便，但是刷新了页面；

使用history.pushState(/url)，无刷新页面，静态跳转；

引进router，然后使用router.push(/url)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

13、vue slot

答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

14、vue项目是打包了一个js文件，一个css文件，还是有多个文件？

答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。

15、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

16、Vue2中注册在router-link上事件无效解决方法

答： 使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

17、RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法

18、axios的特点有哪些

答：从浏览器中创建XMLHttpRequests；

node.js创建http请求；

支持Promise API；

拦截请求和响应；

转换请求数据和响应数据；

取消请求；

自动换成json。

axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送

params一般适用于get请求，data一般适用于post put 请求。

19、请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)

　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

　　4. 封装完毕了，直接调用即可

20、params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据

params刷新 会 丢失 params里面的数据。

21、vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

22、vue常用的UI组件库

Mint UI，element，VUX

23、mvvm 框架是什么？

答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

24、vuex是什么？怎么使用？哪种功能场景使用它？

答：vue框架中状态管理。在main.js引入store，注入。

新建了一个目录store.js，….. export 。

场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

25、vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

26、js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

27、如何判断当前脚本运行在浏览器还是node环境中？

通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

（4），此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块

简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

28、ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

29、盒模型

1、复制

/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */

.box {

width: 200px;

height: 200px;

padding: 20px;

margin: 20px;

background: red;

border: 20px solid black;

box-sizing: border-box;

}

/* 标准模型 */

box-sizing:content-box;

/*IE模型*/

box-sizing:border-box;

2、如何实现一个最大的正方形

用 padding-bottom 撑开边距

section {

width:100%;

padding-bottom: 100%;

background: #333;

}

3、水平垂直居中

两栏布局，左边固定，右边自适应，左右不重叠

flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局

.left{

float:left;

width:300px;

margin-right: 10px;

background: red;

}

.right{

overflow: hidden; /* 创建BFC */

background: yellow;

}

4、画三角形

复制

.shape {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 50px solid transparent;

border-bottom: 50px solid blue;

background: white;

}

30、BFC理解（Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念）

BFC触发条件：

根元素，即html

float的值不为none（默认）

position的值为absolute或fixed

overflow的值不为visible（默认）

display的值为inline-block、table-cell、table-caption

BFC特性：

内部的Box会在垂直方向上一个接一个放置。

B ox垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box 的左边，与包含块border box的左边相接触。

BFC的区域不会与float box重叠。（可用于清浮动）

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算BFC的高度时，浮动元素也会参与计算。

Vue实现吸顶效果

原理：首先我们获取容器的滚动距离scrollTop ，然后我们再用这个滚动距离和咱们需要吸顶的容器距离顶部的距离做一个比较

https://blog.csdn.net/zbwroom/article/details/81911909