前端面试笔记（二）

1.vue的生命周期：

Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为Vue的生命周期。
对于各个周期的理解： 
创建前/后： 
beforeCreated：此时的vue实例还没有挂载元素$el，数据对象data也是undefiend； 
created：vue实例的数据对象data有了，但是$el还没有 
载入前/后： 
beforeMount：vue的实例的$el和data都初始化了，但还是挂载在之前虚拟的DOM节点上面，data.message还未替换 
mounted :vue实例挂载完成，data.message成功渲染。 
更新前/后 
在data发生变化的时候，会触发beforeUpdate和updated方法。 
销毁前/后： 
在destiory之后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

 

2.vue数据双向绑定（原理）：

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

所谓的双向绑定，就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: 
1、在自身实例化时往属性订阅器(dep)里面添加自己 
2、自身必须有一个update()方法 
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果
 

3.响应式布局：

 响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本

（1）通过媒体查询的方式即CSS3的meida queries

（2）以天猫首页为代表的 flex 弹性布局

（3）以淘宝首页为代表的 rem+viewport缩放 （推荐）

（4）bootstrap栅格系统（内置viewport）

4.webpack打包更小，速度更快：

使用监听模式或热更新热替换

webpack支持监听模式，此时需要重新编译时就可以进行增量构建，增量构建是很快的，基本不到一秒或几秒之内就能重新编译好

原文（webpack打包优化方法）：https://www.cnblogs.com/imwtr/p/7801973.html

5.什么是vuex：

vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车,有state、mutations、actions、getters四个属性值

 

6.MVC和MVVM

MVC是一种设计模式，它将应用划分为3个部分：model数据(模型)、view展示层(视图)和controller用户交互层。结合一下下图，更能理解三者之间的关系。

MVVM是由：Model数据模型、ViewModel、View视图这三个部分组成。ViewModel起着连接View和Model的作用，同时用于处理View中的逻辑。

 

MVVM(Model-View-ViewModel)

Model(模型):数据层，负责存储数据。
View(控制器):就是ViewController层，他的任务就是从ViewModel层获取数据，然后显示。
ViewModel(视图模型):就是View和Model层的粘合剂，封装业务逻辑处理，封装网络处理，封装数据缓存。就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

常考面试题：

1.父组件与子组件传值

• 父组件传给子组件：子组件通过props方法接受数据;
• 子组件传给父组件：$emit方法传递参数

2.vue中的指令和它的用法

• v-if：判断是否隐藏；
• v-for：数据循环；
• v-bind:class：绑定一个属性；
• v-model：实现双向绑定；
• v-on：用于绑定HTML事件 ，v-on:click 缩写为 @click

 3.v-show和v-if指令的共同点和不同点

• v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

4.vue-router定义和组件

• vue用来写路由一个插件。router-link、router-view

5.vue生命周期的作用

• 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

6.vue.js的两个核心是什么？

• 数据驱动
• 组件系统

 

一句话就能回答的面试题：

1.css只在当前组件起作用

    在style标签中写入scoped即可：

2. route和route和route和router的区别

    route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

3. vue.js的两个核心是什么？

• 数据驱动
• 组件系统

4. vue常用的修饰符？

    .prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

5. v-on可以绑定多个方法吗？

    可以

6. vue中key值的作用？

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

7. 什么是vue的计算属性？

    在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

8. vue等单页面应用及其优缺点

    优点： Vue的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点： 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。