大个女啦，不要总是依赖别人，要做一个被人需要的人，在找工作，先复习一波，加油！
前端小白，有错误请各位大佬指出，谢谢谢谢！！！

整理了一些自己认为面试中会问到的知识，很乱--给自己看的，如果有错误请大神赐教，谢谢各位哈~~~

1.Vue的优点

体积小、虚拟DOM(无DOM操作)、双向数据绑定、易上手入门简单

2.Vue中的MVVM模型原理

MVVM是Model-View-ViewModel的缩写，它是一种软件架构风格。当View(视图层)发生改变时，会自动更新到视图模型(ViewMode)，反之亦然，这就是常说的数据绑定。

3.Vue的生命周期及其钩子函数

vue实例从创建到销毁的过程就是生命周期。

vue的生命周期一共有4个阶段，分别是：

创建前/后

创建前(beforeCreate())：实例的挂载元素el和数据对象data都为undefined，还未初始化。应用场景：在此处加loading事件。

创建后( created() )：实例的数据对象data有了，el还没有。应用场景：结束loading事件。

挂载前/后

挂载前( beforMount() )：模板已获取到，但是数据未挂载到模板上。

挂在后( mounted() )：数据已经挂载到模板中。应用场景：发送AJAX。

更新前/后

更新前/后( beforUpdate() /updated() ) ：当data变化时，会触发这两个方法。

销毁前/后

销毁前/后( beforDestroy() /deestroy() )：执行deestroy方法后，data的更新不会再触发周期函数，说明这时vue实例已解除了监听事件和对dom的绑定，但dom的结构依然存在。

Vue生命周期三个阶段：初始化阶段更新阶段销毁阶段阶段一：初始化阶段创建前beforeCreate() Vue 实例创建前被调用，数据和模板均未获取到（挂载点还没有，数据还没有准备好）

创建后created() Vue实例创建后，最早可以获取到data数据的钩子，但是模板未获取到（已经可以获取到data里面的数据，但是还没有拿到挂载点）建议在这里面发送 ajax 异步请求（最好在created钩子发ajax请求数据，下面的钩子都能发，但是在update之后重新挂载消耗性能）（提前拿到数据，挂载的时候就有数据了）

挂载前beforeMount() 数据挂载之前，获取到了模板，但是数据还未挂载到模板上（挂载点已找到，数据也准备好，但是还未渲染到节点里面）

挂载后mounted() 数据已经挂载到模板中了

2.更新阶段(数据有变化就触发) 更新前beforeUpdate() 当data 数据更新之后，去更新模板中的数据前调用更新后updated()

3.销毁阶段（主动销毁: $destroy();路由切换组件的时候，组件也会被销毁）销毁前beforeDestroy() 销毁 Vue 实例之前调用收尾工作：系统做：销毁data里面的数据，和解绑事件；主动做：关闭定时器(在这个页面如果有定时器，销毁vue实例的时候，需要主动关闭定时器)有聊天功能关闭聊天室，通过axios.CancelToken.source()方法取消axios请求。销毁后destroyed() 销毁 Vue 实例之后调用

4.VueX

是什么：是一个数据管理工具，一个公共数据池。

作用：页面与页面之间通讯，可以做到请求一次可以多次调用数据，提高性能。

有什么：VueX里面有5个核心：store,mutations,action,getter,moduel（每个模块都有自己的state,getter,mutations,action）

首先要初始化store:仓库，用于读取状态值，里面有：

state:存放数据状态，不可直接改变里面的数据。
mutation：存放普通方法，对state数据的增删改查
Action(放异步方法,对state数据管理):可以理解为通过将mutations里面处理数据的方法变为异步处理数据的方法，简单的来说就是异步操作数据。
getter(相当于计算属性的get):类似vue里面的computed计算属性(只有get方法):根据state数据的改变而改变，场景：购物车的数量和总价（！！！必须有return返回值）

vuex的应用场景：单页面应用，组件志健的状态，音乐播放，登录状态，加入购物车

export default new Vuex.Store({//1.创建仓库store
    //1.state,因为在主页面已经能把Store注入实例，所以在其他页面可以使用this.$store.state获取
    state: {
        count:0
    }

    //2.getters  调用方法：this.$store.getters
    getters:{

    }

    //3.mutations,存放普通方法，对state数据的增删改查，
    //在其他页面调用方法：this.$store.commit('type'，payload)，type:mautations里面的方法名，payload:传入的参数        mutations: {
            add(state,payload){//这里的state就是this.state,payload传入的参数，只能是一个，但是可以是对象形式传入
                state.count = payload + state.count;
             }
            cut(state,payload) {
                state.count = state.count - payload
            }
        }

   // 4.action,在这里可以定义调用mutations的方法，也可以存放异步代码
    //在其他页面调用方法：this.$store.dispatch('actionName',payload)
        action： {
            addItem(context,payload) {//
                context.commit('add',payload);//调用mutations的add方法，改变state
            }
        
            cutItem('context',payload) {
                context.commit('cut',payload);//调用mutations的cut方法
            }
        }
    
})

5.Vue-Router路由

Vue Router是vue.js官方的一个路由管理器，它可以通过不同的请求路径切换到不同的组件并且进行页面渲染。

声明式导航 <li><router-link to = "/foo">go to foo</router-link></li>

编程式导航 this.$router.push({ path:'/home'})

Vue-Router的使用步骤：

//1.安装引入
//2.定义组件
//3.配置路由表（ ）
//4.将路由注入到实例
//5.设置导航跳转
//6.设置路由出口

6.http是一种网络协议，最初的目的是为了发送和接受html页面的一种方法，它规定了一种协议，让浏览器更高效。

区别：1.安全性、传输方式不同

http是超文本传输协议，信息是明文方式传输的，如果黑客截取到web浏览器和客户端之间的传输报文，就会直接能够获取到其中的信息。

https是具有安全性的SSL加密传输协议，为浏览器和服务器之间的通信加密，是一个以安全性为目的的一个网络通道。

2.端口号不同

http:40 https:443

3.收费标准不同

http:免费 https:收费

4.连接方式不同

http:无状态协议

https:ssl+http协议构建的可进行加密传输，身份认证的网络协议。

优化包括：性能优化，用户体验优化，搜索引擎优化

性能优化：合并压缩，服务器压缩，按需引入，图片优化，虚拟DOM，缓存

7.跨域：所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨

如何解决跨域：

购物车全选和反选用了什么功能：computed，里面有get和set的方法

8.ES6新特性：

1、 let：用来代替 var的关键字，

1、变量不允许被重复定义 2、不会进行变量声明提升 3、保留块级作用域中i的

2、const：1、常量值不允许被改变 2、不会进行变量声明提升

3、解构语法

4、模板字面量： ` ${ 你好 } 我叫 ${中国} ` 替代 '你好' + 我叫+‘中国’

5、字面量：变量名和属性名一样就写一个

6、for...of 循坏可以迭代数组，字符串，不可循环对象

forEach() 只能循环数组

7、拓展运算符

8、箭头函数：与普通函数的区别：1、书写上用=>代替了function 2、没有自己的this,因为他没有protpye 3、不能当做构造函数使用，就是不能够new

9.HTML5新增：1.语义化标签：<header>, <footer>,<nav>，<section>...

2.增强型表单

3.视频和音频

4.地理定位

5.Web Socket

6.渐变

10.CSS3: 属性选择器：属性选择器，伪类选择器，

1.transform 变形 2.transition 过渡 3.animation 动画 4.圆角 5.图片边框，文字阴影和盒阴影

11.响应式布局：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

1.媒体查询 2.百分比布局 3.rem布局 4.视口单位：vw

Flex弹性布局，兼容性较差

Grid网格布局，兼容性较差

Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

12.sass:可以嵌套，可以写函数（计算视口单位：vw），定义变量复用，循环

13.vue $router 路由传参的3种方法

第一种：使用router的name属性也就是params来传递参数----在url上会消失
第二种：使用query来传递参数
第三种：动态路由----使用vue里的标签来传递参数