效果图如下：
#### 5.什么是`MVVM`框架？
`MVVM`框架是一个`Model-View-ViewModel`框架，其中`ViewModel`连接模型`Model`和视图`View`。
在`vue.js`中的`MVVM`模式：
>
> `vue.js`是通过数据驱动的，`vue.js`实例化对象将`dom`和数据进行绑定，一旦绑定，`dom`和数据将保持同步，每当数据发生变化，`dom`也会随着变化；`ViewModel`是`Vue.js`的核心，它是`Vue.js`的一个实例。`Vue.js`会针对某个`HTML`元素进行实例化，这个`HTML`元素可以是`body`，也可以是某个`css`选择器所指代的元素。`DOM Listeners`和`Data Bindings`是实现双向绑定的关键。`DOM Listeners`监听页面所有`View`层中的`DOM`元素，当发生变化时，`Model`层的数据随之变化。`Data Bindings`会监听`Model`层的数据，当数据发生变化时，`View`层的`DOM`元素也随之变化。
>
>
>
#### 6.`active-class`是哪个组件的属性
它是`vue-router`模块的`router-link`组件的属性
#### 7.如何定义`vue-router`的动态路由
在静态路由名称前面添加冒号，如设置`id`动态路由参数，为路由对象的`path`属性设置`/:id`
#### 8.如何获取传过来的动态参数
在组件中，使用`$router`对象的`params.id`，如`$route.params.id`
#### 9.`vue-router`有哪几种导航的钩子
有三种，第一种是全局导航钩子，`router.beforeEach(to,from,next)`，作用是跳转前进行判断拦截；第二种是组件内的钩子；第三种是单独路由独享组件。
导航钩子又叫导航守卫，又分为全局钩子，单个路由独享钩子和组件级钩子。
全局钩子有`beforeEach`,`beforeResolve`,`afterEach`，单个路由独享钩子有：`beforeEnter`
组件级钩子有：`beforeRouteEnter`，`beforeRouteUpdate`，`beforeRouteLeave`：它们有以下参数：
`to`表示即将要进入的目标路由对象；`from`表示当前导航正要离开的路由；`next`表示一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。
#### 10.`mint-ui`是什么
`mint-ui`它是基于`Vue.js`的前端组件库，用`npm`安装，然后通过`import`导入样式和`JavaScript`代码，`vue.use(mintUi)`用于实现全局引入，`import {Toast} from 'mint-ui'`用能于在单个组件局部引入
#### 11.`v-model`是什么
`v-model`是`vue.js`的一条指令，实现数据的双向绑定
双向数据绑定的原理：
`vue.js`使用`es5`提供的属性特性功能，结合发布者-订阅者模式，通过`Object.defineProperty()`为各个属性定义`get,set`特性方法，在数据发送改变时给订阅者发布消息，触发相应的监听回调。
>
> 过程：a，对需要观察的数据对象进行递归遍历，包含子属性对象的属性，设置`set`和`get`特性方法；当给这个对象的某个值赋值时，会触发绑定的`set`特性方法，就能起到监听数据的变化。b，用`compile`解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，就会收到通知，并更新视图。c，`Watcher`订阅者是`Observer`和`Compile`之间通信的桥梁：在自身实例化时向属性订阅器`dep`里面添加自己；自身必须有一个`update()`方法；在`dep.notice()`发布通知时，能调用自身的`update()`方法，并触发`Compile`中绑定的回调函数。d，`MVVM`是数据绑定的入口，整合了`Observer`，`Compile`和`Wathcher`三者，通过`Observer`来监听自己的`model`数据变化，通过`Compile`来解析编译模板指令，最终利用`Watcher`来搭起`Observer`和`Compile`之间的通信桥梁，达到数据变化通知视图更新的效果，利用视图交互，变化更新数据`model`变更的双向绑定效果。
>
>
>
#### 12.`vue.js`中标签如何绑定事件
第一种方式，使用`v-on`；第二种方式，使用`@`语法糖
#### 13.`vuex`是什么
`vuex`是`vue.js`框架实现的状态管理系统。使用`vuex`，要引入`store`，并注入`vue.js`组件中，在组件内部可以通过`$store`访问`store`对象；使用场景，在单页应用中，用于组件之间的通信，如音乐播放，登录状态管理，加入购物车等
`vuex`可以说是一种开发模式或框架，它是对`vue.js`框架数据层面的扩展，通过状态集中管理驱动组件的变化，应用的状态集中放在`store`中，改变状态的方式是提交`mutations`，这是个同步的事务，异步的逻辑应该封装在`action`中。
#### 14.在`vue`中说说你知道的自定义指令
自定义指令两种：一种全局自定义指令，`vue.js`对象提供了`directive`方法，可以用来自定义指令，`directive`方法接收两个参数，一个是指令名称，另一个是函数；第二种是局部自定义指令，通过组件的`directives`属性定义。
#### 15.`vue.js`中常用的4种指令
`v-if`判断对象是否隐藏；`v-for`循环渲染；`v-bind`绑定一个属性；`v-model`实现数据双向绑定
在`v-if`循环中实现`v-model`数据的双向绑定：
>
> 有时需要创建`input`，并用`v-model`实现数据的双向绑定。此时可以为`v-model`绑定数组的一个成语`selected[$index]`，这样可以给不同的`input`绑定不同的`v-model`:
>
>
>
{{arrDa[index]}}
#### 16.`vue-router`是什么
`vue-router`是`vue.js`的路由插件，（常用`router-link`和`router-view`）
#### 17.`vue.js`的生命周期
共分8个阶段：
1. `beforeCreate`
>
> 在实例初始化之后，数据观测者`data observer`和`event/watcher`事件配置之前调用
>
>
>
1. `created`
>
> 在实例创建完成后立即调用，此时，实例已完成：观测者，属性和方法的运算，`watch/event`事件回调，挂载阶段还没开始，`$el`属性目前不可见。
>
>
>
1. `beforeMount`
>
> 在挂载开始之前调用，相关的`render`函数首次调用。
>
>
>
1. `mounted`
>
> `el`被新创建的`vm.$el`替换，并且在挂载到实例上之后再调用该钩。如果`root`实例挂载了一个文档内元素，当调用`mounted`时`vm.$el`也在文档内。
>
>
>
1. `beforeUpdate`
>
> 在数据更新时调用，发生在虚拟`dom`重新渲染和打补丁之前。
>
>
>
1. `updated`
>
> 由于数据更改导致的虚拟`dom`重新渲染和打补丁，在这之后会调用该钩子。
>
>
>
1. `beforeDestroyed`
>
> 在实例销毁之前调用，在这一步，实例仍然完全可用。
>
>
>
1. `destroyed`
在`vue.js`实例销毁后调用，`vue.js`实例指示的所有东西都会解除绑定，所有的事件监听会被移除，所有的子实例也会被销毁。
如果使用组件的`keep-alive`功能时，增加两个周期：
* `activated`在`keep-alive`组件激活时调用；
* `deactivated`在`keep-alive`组件停用时调用。
`<keep-alive>`包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。`<keep-alive>`是一个抽象组件，它自身不会渲染一个`DOM`元素，也不会出现在父组件链中。
当在`<keep-alive>`内切换组件时，它的`activated`和`deactivated`这两个生命周期钩子函数将会执行。
增加一个周期钩子：`ErrorCaptured`表示当捕获一个来自子孙组件的错误时调用。
#### 18.描述封装`vue`组件的作用过程
组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低，难维护，复用性等问题。
使用`Vue.extend`方法创建一个组件，使用`Vue.component`方法注册组件，子组件需要数据，可以在`props`中接收数据，而子组件修改好数据后，想要把数据传递给父组件，可以使用`emit`方法。
使用自定义组件：
在`components`目录中新建组件文件，脚本一定要导出暴露的接口；导入需要用到的页面；将导入的组件注入`vue.js`的子组件的`components`属性中；在`template`的视图中使用自定义组件。
创建组件
{{msg}}
#### 19.`vue-loader`是什么
`vue-loader`它是解析`.vue`文件的一个加载器，将`template/js/style`转换成`javascript`模块；通过这个`vue-loader`，`javascript`可以写`EMAScript6`语法，`style`样式可以应用`scss`或`less`，`template`可以添加`jade`语法。。。
#### 20.在`vue.cli`项目中的`src`目录说明
1. `assets`文件夹存放静态资源;
2. `components`存放组件;
3. `router`定义路由相关的配置;
4. `view`是视图;
5. `app.vue`是一个应用主组件;
6. `main.js`是入口文件。
#### 21.对`vue.js`的`template`编译的理解
首先转化成`AST`抽象语法树，`Abstract Syntax Tree`，就是将源代码语法结构抽象成树状表现形式，然后通过`render`函数进行渲染，并返回`VNode`（`Vue.js`的虚拟`dom`节点）。
>
> 通过`compile`编译器把`template`编译成`AST`，`compile`是`createCompiler`的返回值，`createCompiler`用来创建编译器，`compile`还负责合并`option`；`AST`会经过`generate`-将`AST`转换成`render function` 字符串的过程-得到`render`函数，`render`的返回值是`VNode`，`VNode`是`Vue.js`的虚拟`DOM`节点，里面有标签名，子节点，文本等。
>
>
>
#### 22.`v-show`指令和`v-if`指令的区别
它们都是条件渲染指令，不同的是，`v-show`的值无论是`true`或`false`元素都会存在于`html`页面中，而`v-if`的值为`true`时，元素才会存在于`html`页面中。
`v-show`指令是通过修改元素的`style`属性值实现的。
#### 23.让`css`只在当前组件中起作用
只需要在`style`标签中添加`scoped`属性，`<style scoped></style>`
#### 24.在`vue.js`中如何实现路由嵌套
路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到`router-view`定义组件渲染的位置，要进行页面跳转，要将页面渲染到根组件内。首先实例化根组件，在根组件中定义组件渲染容器，然后，挂载路由，当切换路由时，将会切换整个页面。
new Vue({
el: ‘#dada’,
router: router,
template: ‘’
})
#### 25.在`vue.js`中的`ref`属性有什么作用
可以直接访问组件内部的一些元素，定义属性可以在组件内部通过`this.$refs`属性，，访问设置`ref`属性的元素，这是一个原生的`DOM`元素，要使用原生`DOM API`操作它们。
#### 26.在`vue.js`开发环境下调用接口，如何避免跨域
在`config/index.js`内对`proxyTable`项进行如下配置：
proxyTable: {
‘/api’: {
target: ‘http://xxx.com’,
changeOrign: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
#### 27.`axios`是什么
`axios`是`vue2.0`中用来替换`vue-resource.js`插件的一个模块，是一个请求后台资源的模块
使用`npm install axios`来安装`axios`
import Vue from ‘vue’
import axios from ‘axios’;
Vue.prototype.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion() { this.http.get(‘data.json’).then(res=>{
this.msg = res.data.data
})
}
})
当调用`axios.post('api/user')`时，表示发送`post`异步请求。
#### 总结
* 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
* 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）
* 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
* 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～
祝大家都有美好的未来，拿下满意的 offer。
1797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
