前端vue面试题总结

1.Vuex中的重要核心属性？
答：五个核心属性：state、getters、mutations、actions、modules；
    state：vuex的基本数据，用来存储变量。
    getters：从基本数据（state）派生的数据，相当于state的计算属性。
    mutations：提交更新数据的方法，必须是同步的（如果需要异步使用action）。
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，
并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。    
    action：和mutation的功能大致相同，不同之处在于
     ==》1. Action 提交的是 mutation，而不是直接变更状态。 
     ==》2. Action 可以包含任意异步操作。
    modules：模块化vuex，可以让每一个模块拥有自己的
state、mutation、action、getters,使得结构非常清晰，方便管理。

2.v-if和v-show的区别
    v-if直接从dom树上添加或者删除节点。
    v-show是设置节点的display为none。不会从dom里删除。
    v-if比v-show更消耗性能，经常切换建议使用v-show。

3.Vue的生命周期共有哪些阶段。
    八个阶段：1.beforecreate(创建前)
            2.created（创建后）
            3.beforemount（载入前）
            4.mounted（载入后）
            5.beforeupdate（更新前）
            6.updated（更新后）
            7.beforedestroy（销毁前）
            8.destroyed（销毁后）
    Vue第一次页面加载会触发beforeCreate  created beforeMount mounted四个钩子函数

4.vue中computed和watch区别
    computed是计算属性，要用的属性并不存在，需要使用已有的数据来计算获得
    watch是监视属性，监视的属性必须存在，当监视的属性改变时，回调函数会自动调用

5.vue中key有什么作用
    1.高效的更新虚拟DON
    2.默认使用就地复用策略，列表数据修改的时候，他会根据key值去判断某个值是否修改，
    如果修改，则重修渲染这一项，否则复用之前的元素
    总结：不使用时，当更新列表时，所有数据都需要重新渲染一遍
    使用时，会在适当的位置插入新元素来完成更新

6.vue常用的修饰符有哪些应用场景
   vue中修饰符分为：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符。
  应用场景

            .stop  阻止事件冒泡
            .native 绑定原生事件
            .once 事件只执行一次
            .self  将事件绑定在自身身上，相当于阻止事件冒泡
            .prevent  阻止默认事件
            .caption 用于事件捕获
            .keyCode 用于键盘按键事件监听
            .right 鼠标右键事件监听
            .trim 用于输入框，去除内容前后空格

7.vue中常用的指令
    v-for  v-model  v-if  v-router v-show  v-on v-bind

8.vue组件间通信的分类可以分成哪些
    父组件传子组件，子组件使用poros
    子组件向父组件，使用$emit

9.vue-router有哪几种路由守卫
第一种全局路由
router.beforEach和router.afterEach
第二种：路由独享守卫
routerEnter
第三种组件内守卫
beforeRouterEnter
beforeRouterLeave

10.vue双向绑定原理
object.defineproperty进行数据劫持再结合观察者模式，即发布订阅来实现数据双向绑定，这也是vue2的响应式原理，而vue3这使用proxy代替了object.defineproperty实现。

11.vue中组件和插件有什么区别
组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

12.<keep-alive></keep-alive>的作用是什么？
keep-alive是vue内置组件，可以是被包含的组件保留状态，或避免重新渲染。

13.vue-loader是什么？使用它的用途有哪些？
vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或者less、template可以加jade等。

14.axios
js中使用import进来，然后使用get、post。返回成功在.then函数中执行，返回失败在.catch函数中执行。

15.v-model的使用
表单的双向绑定，是一个语法糖，主要做了两个操作：v-bind绑定一个value属性；v-on指令给房钱元素绑定input事件。

16.$nextTick的使用
当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后再获取，才能成功。