前端面试系列（一）

一、Vue的双向数据绑定原理

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要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变更的双向绑定效果。

二、组件之间的传值

1.父组件与子组件传值
a.父组件通过标签上面定义传值，子组件通过props方法接受数据
b.子组件通过this.$emit传递参数，父组件通过中转接受数据

 

2.页面之间传值

通过v-on 监听 和$emit触发来实现。

 

三、v-show和v-if指令的共同点和不同点

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

link和@import区别

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3)import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;   

(4)link支持使用js控制DOM去改变样式，而@import不支持;

四、Vuex

1.vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

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

1. vuex有哪几种属性？
   有五种，分别是 State、 Getter、Mutation 、Action、 Module
   vuex的State特性
   A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
   B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
   C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性
   vuex的Getter特性
   A、getters 可以对State进行计算操作，它就是Store的计算属性
   B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
   C、 如果一个状态只在一个组件内使用，是可以不用getters
   vuex的Mutation特性
   Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
   3.不用Vuex会带来什么问题？
   可维护性会下降，想修改数据要维护三个地方；可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

 

 

4.使用vuex的核心概念

（1）state - Vuex store实例的根状态对象，用于定义共享的状态变量。
（2）Action -动作，向store发出调用通知，执行本地或者远端的某一个操作（可以理解为store的methods）
（3）Mutations -修改器，它只用于修改state中定义的状态变量。
（4）getter -读取器，外部程序通过它获取变量的具体值，或者在取值前做一些计算（可以认为是store的计算属性）

5.vuex在vue-cli中的应用

（1）npm下载vuex资源包:pm install vuex --save

（2）在 src/main.js 中引入:import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

import store from './vuex/store'

在 src 下 新建 vuex 文件夹

6.组件中使用 vuex 的值和修改值的地方？

1.this.$store.state

2.this.$store.getters

3.this.$store.dispatch

7.在vuex中使用异步修改

在调用vuex中的方法action的时候，用promise实现异步修改

const actions = {

    asyncInCrement({ commit }, n){

        return new Promise(resolve => {

            setTimeout(() => {

                commit(types.TEST_INCREMENT, n);

                resolve();

            },3000)

        })

    }}

五、生命周期

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

1.什么是vue生命周期

答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2.vue生命周期的作用是什么

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

3.vue生命周期总共有几个阶段

答：可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4.第一次页面加载会触发哪几个钩子

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5.DOM 渲染在 哪个周期中就已经完成

答：DOM 渲染在 mounted 中就已经完成了。

6.简单描述每个周期具体适合哪些场景

答：生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom