面试题总结

1、Vue中使用的框架

Element-ui(pc端)，vant-ui(移动端)，除了这些还使用过Bootscript，layui

2、Vue的生命周期

一共分为八个阶段：

beforeCreate(创建前)，Create(创建后)

beforeMount(载入前)，Mount(载入后)

beforeUpdata(更新前)，Updata(更新后)

beforeDestroy(销毁前)，Destroyed(销毁后)

Vue第一次页面加载触发的钩子函数

创建前，创建后，载入前，载入后

生命周期每个阶段的使用场景

创建时期的钩子函数的使用：进行初始化事件，进行数据的观测，数据已经和data属性进行了绑定，data中的数据变化的时候视图也会发生变化

创建完成和挂载前时期的钩子函数的使用：会判断对象是否有el选项，如果有就继续往下编译，没有救停止编译，停止后会直接在该vue实例上调用vm.$mount()，调用它将继续往下编译

综合排名优先级：render函数选项 > template选项 > outer HTML

挂载前和挂载完成钩子函数作用：DOM渲染

更新前和更新完成钩子函数的作用：当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数

销毁前和销毁钩子函数的作用：beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

3、组件之间的传值

父子组件传值：父组件属性绑定，子组件使用props进行接受

父子组件传递函数：直接使用事件绑定机制自定义事件属性，子组件就能够通过某些方式调用这个传递的方法，子组件通过this.$emit()调用

子父组件传值：子组件通过$emit创建自定事件，父组件通过@自定义事件进行接受

兄弟组件传值：通过事件中心，通过$emit触发一个自定义事件， $.on监听事件 $.off销毁事件

4、vue动态路由传参和路由跳转方式

路由传参：query(页面刷新会保留) promise(页面刷新不会保留)

路由跳转：back   push   go  replace  router-link(声明式)

5、路由导航守卫：vue-router

路由导航守卫一共有三种：全局的导航守卫，组件内导航守卫，router独立使用的导航守卫

导航守卫router.beforeEach全局前置守卫：

to：即将要进入的目标

from：代表从那个路径跳转过来的

next：是一个函数，表示放行

组件导航守卫：

它是写在每个单独的vue文件里的路由守卫

beforeRouterEnter()：在路由进入之前，组件实例还没有渲染，无法获取this实例，只能通过vm实例访问组件实例

beforeRouterUpdate()：同一个页面，刷新不同数据时调用

beforeRouterLeave()：离开当前路由页面调用

路由独立守卫：路由独享守卫是在路由配置页面单独给路由配置的一个守卫

next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

        next()//直接进to 所指路由
        next(false) //中断当前路由
        next('route') //跳转指定路由
        next('error') //跳转错误路由

6、vue插槽作用

内容插槽：存放内容

后备插槽：在组件的《slot》中添加内容

作用域插槽：可以让父组件使用子组件的数据，在子组件在插槽中用v-bind绑定自身的数据，父组件在使用组件时可以用v-slot=“slotprops”接受，slotprops自定义

具名插槽：每一个插槽都用name属性绑定一个不同的名字，在接受内容时避免发生混乱，在组件使用时用v-slot：名字的方式进行绑定

7、v-show和v-if的区别

相同点：他们都能够控制元素的显示和隐藏

不同点：

v-show本质时候通过控制css样式的display：none控制显示隐藏

v-if是动态的向dom树内添加或者删除dom元素

v-show其实控制的是css

v-if切换有一个局部编译卸载的过程，过程中合适的销毁和重建内部的事件监听和子组件

性能方面：v-show只编译一次控制的是css，v-if不停地编译销毁和创建，因此v-show性能更好一些

使用场景：频繁切换某个节点用v-show，不频繁的使用v-if

8、vue和jQuery的区别

jQuery是使用选择器来选取DOM元素对象，进行赋值、取值、事件绑定等操作，也就是说操作的是DOM元素，数据和页面视图是在一起的

vue是对数据不用再进行DOM元素的操作，数据和视图是分离的，通过vue的实例来实现数据的绑定

9、MVVM和MVC的区别

MVVM：模型-视图-视图模型，其中视图模型是mvvm的核心

mvvm主要解决了mvc中大量的dom操作使页面渲染性能降低，记载速度变慢

两者的区别并不是很大，只不过是mv取代了c，在mvc的基础生增加了一层mv，弱化了c的概念，mvvm实现的是业务逻辑组建的重用，使开发更加的高效，结构更加的清晰，增加代码的复用

10、vue数据双向绑定的原理

其中的核心是：Object.defineProperty()   进行数据的双向绑定

11、Object.defineProperty和Proxy的区别

Proxy：可以直接监听对象而不是属性，直接监听数组的变化，返回的是一个对象只需要操作新的对象就好，

Object.definePropery：只能遍历对象属性直接修改