1. 说出vue实例的属性
Vue实例配置对象
| 选项 | 说明 |
|---|---|
| data | Vue实例数据对象 |
| methods | 定义Vue实例中的方法 |
| components | 定义子组件 |
| computed | 计算属性 |
| filters | 过滤器 |
| el | 唯一根元素 |
| watch | 监听数据变化 |
2. 说几个vue 指令 分别说明什么意思
v-on事件绑定
v-for循环遍历
v-if显示隐藏
v-show显示隐藏
v-model双向绑定
v-html解读标签3. 说一下vue 如何实现数据双向绑定 底层原理
v-model
Object.defineProperty()
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。4. vue 属性 data computed watch 这三个属性的区别
data：记录数据
computed: 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
watch: 一个对象，key是需要观察的表达式，value是对应回调函数。主要用来监听某些特定数据
的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体； 但如
果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择.
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响5. 说一下什么是变异数组和非变异数组以及可变对象和不可变对象
变异：会改变原数组
非变异：不会改变原数组
可变对象：属性变更时不需要新建对象的对象
不可变对象：属性变更时必须新建的对象6. vue 数据管理架构 vuex 的原理
Vue Components接受用户操作行为=》执行dispatch方法=》将这个方法传递给action，action再处理
vue Components接收到的所有交互行为=》通过commit对mutation进行提交=》mutations进行状态改
变操作=》store集中储存data对象=》getter获取对象方法
Vue组件接收交互行为，调用dispatch方法触发action相关处理，若页面状态需要改变，则调用commit
方法提交mutation修改state，通过getters获取到state新值，重新渲染Vue Components，界面随之
更新。7.vue什么时候用到深度监听，怎么实现深度监听
watch属性 深度监听: 监测到一个对象或者数组的变化用到深度监听
watch: {
' user.phone ' : {
handler:function() { //特别注意，不能用箭头函数，箭头函数，this指向全局
处理函数
},
deep: true //深度监听
}
}8.vue自定义指令意义
意义：在vue中代码的抽取和复用主要是通过组件，如果我们想要对DOM元素进行底层操作，可以通过
自定义组件来完成。
全局自定义指令和局部自定义指令
Vue.directive
Once 只调用一次，指令第一次绑定到元素的时调用
inserted 被指令绑定指令的元素插入 父节点的时候调用
update 被绑定的元素模版只要发生变化，就会触发（通过比较模板变化前后）
componentUpdated 被绑定元素所在模版完成一次更新周期时被触发
unbind 指令被解除绑定的时候9. vue父组件去访问通信子组件方式有哪些 ?
props
vuex
ref
空的vue实例10. vue子组件去访问通信父组件方式有哪些 ?
（注意：子组件不能直接修改父组件传给的props）
props 父组件把修改自身的方法通过props传递给子组件，
$parent
vue自定义事件：子组件$emit发送事件，父组件通过$on监听，子组件触发，父组件修改
空的vue实例11.vuex里面四个辅助函数
mapState state对象展开
Getters将store中的getter映射到局部计算属性
mapMutations将methods映射为store.commit调用
mapActions将methods映射成store.commit调用12.vue里面的路由守卫有哪些？
全局路由守卫 （所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中
任何一个房子，都需要经过这个大门的检查）
1.beforeEach
组件内路由守卫 （组件内部使用，当路由切换跟改变时触发路由守卫）
1.beforRouterEnter
2.beforRouterUpdate
3.beforRouterLeave
router独享守卫（使用方法与全局守卫相同，全局守卫可以作用于全局，路由独享守卫只作用于
被设置守卫的路由）
1.beforeEnter13.vue里面的data实例为什么是个函数
Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上
的data数据的独立性，规定了必须使用函数。14.vue中混入mixins的理解和使用
mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。
当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
而mixins引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容
进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
使用上来说：用mixins封装一些公共方法，例如表格的渲染，查询接口的调用，分页器等等，大
大减少了代码的重复性。15.vue插槽solt
组件分发
我的理解就是，填空；子组件定义一个插槽就等于留了一个空，父组件可以在这个空里面随意加入
新的内容，简易了复杂组件交互的难度，当有多个内容需要填空时，就需要给插槽去对应的名字来
区别，这就是具名插槽。16.vue中当data里面数据发生改变但是视图未同步更新的处理方法
$forceUpdata()、$set()都用于更新视图
$nextTick()并不是更新视图，而是等数据视图更新之后再执行某些操作17.vue中缓存实现
keep-alive18.vue缓存页面里面怎么做到每次打开页面会执行一个方法
缓存页面里面，created、mounted这些生命周期只会在第一次打开的时候执行。
需用上：
activated
当页面重新显示的时候，执行。搭配 keep-alive、localStrage 和临时变量做页面性能优化。
deactivated
当页面即将被隐藏或替换成其他页面时，执行。可以用来解绑在 activated 上绑定的全局事件。19.vue路由跳转的方式
1.router-link 【实现跳转最简单的方法】
<router-link to='需要跳转到的页面的路径>2、this.$router.push 常用于路由传参，用法同第三种
this.$router.push({
path: '/rental-list/transfer',
query: {
id: this.roleId,
ids: this.checkList
}
3.this.$router.replace{path：‘/’ }类似，不再赘述
20.vue中动态绑定class和style
div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>21.Vue 的父组件和子组件生命周期钩子函数执行顺序？
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed22.能说下 vue-router 中常用的 hash 和 history 路由模式
hash模式url带#号，history模式不带#号
hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式
呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的
url适合推广宣传。
实际项目中还是history模式使用的更多一些。23.$route和 $router的区别是什么？
$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局
部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。24.vue中ref 的作用？
获取dom元素 this.$refs.box
获取子组件中的data this.$refs.box.msg
调用子组件中的方法 this.$refs.box.open()25.map和forEach区别
forEach没有返回值，map有返回值
1. forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或
则打印出来。
2. map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点
在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)。26.简述一下你知道的有哪些ES6的新特性
箭头函数
解构函数
解构对象
let&const
延展操作符
严格模式
字符串模板27.简述 this 的 四种指向 问题
函数调用模式 this指向window
方法调用模式 this指向当前对象
构造函数模式 this指向new创建的新对象
箭头函数 this指向外级函数的this28.跨域如何产生 如何解决跨域
一句话，违反同源策略就会跨域，
前端处理跨域方法：
1.jsonp
2.反向代理
3.配置请求头
4.cross29.什么是闭包 项目如何使用闭包 闭包有什么优缺点
函数嵌套函数
优点
1、不会污染全局环境
2、可以进行形参的记忆，减少形参的个数，延长形参生命周期
缺点
占用内存，容易造成内存泄漏30.谈谈你对面向对象的理解 面向对象的特点
抽形象化编程 封装 继承 多态
面向对象编程是以对象为中心，消息为驱动，程序=对象+消息
封装：将一类事物的属性和行为抽象成一个类，提高代码复用率
继承：进一步将一类事物共有的属性和行为抽象成一个父类，而每一个子类是一个特殊的
父类，继承父类的属性和行为，拓展了已存在的代码块，进一步提高了代码复用率
多态：为了实现接口重用。接触父子类继承的耦合度。允许父类引用指向子类对象31.如何深入理解原型链
实现继承主要依赖原型链，在设置构造函数的属性时，会向他的父元素上面的原型查找，如果
原型没有的话就去object上面查找，Object上面没有，就是undefined32.如何区分 宿主对象 内置对象 本地对象 分别有哪些?
宿主对象：为浏览器自带的ducument，window等
内置对象：为gload Math等不可以实例化的
本地对象：为array obj regexp 等可以new实例化33.get请求和post请求的区别
最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数，相对来说post更
为安全一些。
GET和POST还有一个重大区别
简单的说： GET产生一个TCP数据包；POST产生两个TCP数据包34.HTTP和HTTPS的区别
1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费
证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、
身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是
相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)35.前端性能优化
1.懒加载
2.使用精灵图
3.减少http请求
4.浏览器缓存 c.js、css代码压缩
5.合并css图片
6.缓存ajax、减少DOM操作36.事件委托
把元素绑定在父元素上 子元素触发 父元素代为执行
利用事件冒泡的原理，事件从最深的节点开始，然后逐步向上传播事件（子组件触发，父组件代为执行）
用于创建事件绑定机制37.深拷贝和浅拷贝
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。
B复制A，A变，B变，浅拷贝。
B复制A，A变，B不变，深拷贝。
实现深拷贝：通过JSON.parse( )和JSON.stringify( )38.改变this指向
1.new关键字改变this指向
2.call（）
3.apply（）
4.bind（）39.前端本地存储有哪些，分别有什么区别？
常用cookie,LocalStorage,sessionSorage
不常用IndexedDB（因为api过于复杂）差异对比：
| 对比项目 | cookie | localstorage | sessionStorage |
|---|---|---|---|
| 数据存储时间 | 可设置失效时间 | 永久 | 仅当前会话 |
| 容量 | <=4kb | <=5mb | <=5mb |
40.前端常用的加密方法
crypto
md5
hash
base6441.一个页面从输入URL到页面加载显示完成,这个过程中都发生了什么
浏览器先看有没有缓存有的话直接加载没有执行下一步=>解析域名;获取相应的IP=>建立tcp连
接,与浏览器3次握手=>握手成功,浏览器向服务器发送http请求=>服务器收到请求;返回数
据=>浏览器响应http=>读取数据;渲染页面42.项目中大量使用mixins会有什么弊端
当你使用mixins去提取公用代码时，若是一个mixins文件，那还好说，怎样都行；当mixins文件达到
多个，去维护修改时就会不知道这个方法、属性来自那个mixins文件；更不用说，若是每个mixins文
件功能不独立，mixins之间相互调用，那就真的是一团乱麻了，所以mixins千万不要乱引入，命名、
变量名、函数名一定要注意唯一性。（持续更新中）
暂时整理这么多欢迎补充