vue面试常被问到的问题整理

Posted 2020-12-25 qdjl

1、Vue的双向数据绑定原理是什么？

答 ： vue是采用数据劫持，并且使用发布-订阅者的开发模式。原理是观察者observer通过Object.defineProperty()来劫持到各个属性的getter setter，在数据变动的时候，会被observer观察到，会通过Dep通知数据的订阅者watcher，之后进行相应的视图上面的变化

具体实现步骤，感兴趣的可以看看

第一步：需要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变更的双向绑定效果

2、请详细说下你对vue生命周期的理解？

答 ： 创建前/后，DOM渲染前/后，更新前/后，销毁前/后； 
对于各个周期的理解： 
创建前/后： 
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结构依然存在

3.请说下封装 vue 组件的过程？

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。 
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

4、active-class是哪个组件的属性？

vue-router模块的router-link组件。

5、嵌套路由怎么定义？

当有多层组件嵌套的时候，可以考虑嵌套路由实现 
因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 
可能还会问如何实现重定向： 
使用redirect配置

6.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。 
使用router对象的params.id。

7.vue-router有哪几种导航钩子？

三种； 
最常用的是一个全局导航钩子，router.beforeEach(to,from,next),可以用作路由跳转前进行判断拦截 
第二种：组件内的钩子 
第三种：单独路由独享组件

8、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

css的预编译。 
使用步骤： 
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass） 
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss 
第三步：还是在同一个文件，配置一个module属性 
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

9、v-model是什么？怎么使用？ vue中标签怎么绑定事件？

可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：

10、axios是什么？怎么使用？怎么解决跨域的问题

axios：是请求后台资源的模块； 
因为vue-cli会建立一个服务器，那么本地去用axios请求，会造成跨域；解决方法是通过vue-cli生成的框架的结构目录下的config/index.js，去配置proxyTable配置项； 
详情可参照：https://blog.csdn.net/qq_33559304/article/details/72966028

11.vuex是什么？怎么使用？哪种功能场景使用它？

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

12.vuex的store有几个属性值？

state、mutations、actions、getters四个属性值