面试题整理

面试题
1.vue⽣命周期,⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？
    组件从创立到销毁的整个过程就是生命周期，通过生命周期，我们可以在不同的阶段进行操作
    vue生命周期：beforeCreate=>创建前
                created=>创建后
                beforMount=>挂载前
                mounted=>挂载后
                beforUpdate=>修改前
                updated=>修改后
                beforDestory=>销毁前
                destoryed销毁后
    页面一开始就会执行创建和挂载钩子函数，更新钩子函数需要在改变数据的时候触发，销毁钩子函数在组件切换时触发，
    在项目开发时经常用到created和mounted钩子函数，mounted用来获取dom元素，获取不到用$nextTick解决
    补充：父组件子组件执行顺序：
        加载渲染过程：父组件beforeCreate=>

                                父组件created=>父组件beforMount=>

                                子组件beforeCreate=>子组件created=>子组件beforMount=>
                                子组件 mounted=>父组件mounted=>

        更新过程：父组件beforUpdate=>子组件beforUpdate=>子组件updated=>父组件updated=>
        
        销毁过程：父组件beforDestory=>子组件beforDestory=>子组件 destoryed=>父组件         destoryed=>

        父组件可以监听到子组件的生命周期，通过$emit或者@hook

2. vuex的理解？
    vuex是状态管理工具，vue官方提供的，通过vuex可以实现各组件之间数据共享，vuex有5大核心，state，getters,mutations,actions,modules
    state里面保存的是数据状态，可以理解为数组，
    getters用来获取state里面数据状态并可以对state数据作出处理，类似于计算属性
    mutations修改state里面数据，只能进行同步操作，
    actions也是修改state里面的数据，可以进行异步操作，
    modules模块化操做，项目过大时模块化处理方便

    获取state里面的状态，通过this.$store.state获取，如果要调用getters方法，通过this.$store.getters
    调用mutations里面的方法，通过this.$store.commit获取，调用actions方法通过this.$store.dispatch
    辅助函数方法:  mapState, mapGetters, mapMutations, mapActions
                  mapState, mapGetters,在computed里面调用  mapMutations, mapActions 在methods里面调用
    
    改变state状态一般通过this.$store.dispatch触发actions里面的方法,通过commit调用mutations里面的方法改变state
    vuex弊端：在刷新页面时数据会丢失，需要搭配本地存储解决，通过localStorage将数据存到本地

3.vue路由模式有几种，区别是？
    两种，hash模式和history模式，hash模式在url后面带有#字符，历史模式没有，hash模式不会保存在https请求当中，不会重新加载页面，hash模式
         原理就是onhashChange()事件
         history模式需要前后端配合，前后端请求url要保持一致，否则报404错误
    切换历史状态：forward（）go()  back()
    修改历史状态：pushState()  replaceState()

4.vue路由守卫？
  vue路由守卫是在页面跳转时出发的钩子函数，一共三种，全局路由守卫，组件内路由守卫，路由独享守卫  
  全局路由守卫分为三种：前置路由首位，路由解析守卫，后置路由守卫，
  组件内路由守卫：beforRouteEnter，  beforRouteUptate，beforRouteLeave，
  路由独享守卫：beforEnter
  每个路由守卫都会有几个钩子函数，每个钩子函数有三个回调函数to  from  next分别对应要进入的，要离开的，和进入一个路由在项目中经常使用的
  路由守卫实现页面的鉴权
  当用户登陆后会吧后台返回的token保存在vuex和本地当页面进行跳转的时候我们会在路由守卫里面获取到token，如果token存在执行下一步不存在返回登陆页

5.v-if与v-show的区别？
    两者都是控制dom元素显示与隐藏的
    v-if控制显示与隐藏的时候会删除dom元素，当这个元素需要显示的时候加载
    v-show是先把元素加载出来，然后通过样式display-none控制显示与隐藏
    涉及到频繁显示与隐藏的时候使用v-show，不需要频繁显示与隐藏的时候使用v-if
    例如搜索栏提示就可以使用v-if与v-show

6.v-for与v-if优先级谁更高？
    v-for优先级更高，v-for的时候dom元素刚开始渲染，v-if这个时候还无法判断，他们两个不能同时使用，可以在v-for之外包一个div写上v-if

7.methods    computed   watch 区别？
    methods是定义方法的区域，里面定义的方法需要调用才能触发，不具备缓存
    computed用来计算属性，watch用来监听state中的变化，
    computed支持缓存，当依赖的属性发生变化时，计算属性会重新计算，反之使用缓存中的属性
    watch不支持缓存，对应属性发生变化触发执行
    computed不支持异步有异步操作时无法监听数据变化，watch支持异步
    computed第一次加载就监听，watch第一次加载不监听，immedaite：true默认false，deep深度监听，不推荐，耗费性能
    computed调用return，watch不调用
    computed一个属性受多个属性影响，watch一个数据影响多条数据
    数据变化异步操作或者高性能操作推荐使用watch

8.vue组件通信，写组件的目的，要解决什么？props作用，组件化开发理解？
    父传子：在子组件上定义通信，子组件通过props进行接受，可以通过数组方式进行接受，也可以通过对象方式进行接受，如果父组件没有传递属性，
            子组件可以通过defult设置默认值

    子传父：子组件通过this.$emit（自定义事件，要传给父组件的数据），父组件通过自定义标签监听自定义事件，通过方法接受传过来的数据

    非父子组件通信：通过中央事件总线eventbus，需要创建一个空的js文件，倒出空的vue实例，传数据this.$bus.$emit传递，，
                    接收数据在钩子函数created中，this.$bus.$on接受,,第一个参数事件名称，第二个参数回调函数，包含要接受的数据，
                    以上就是非父子组件通信方式
    利用vuex进行组件通信把公共数据都存在vuex里面就可以实现组件之间都能使用这个数据
    利用v-modle实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在⼀个⼦组件上使⽤ v-model 也能实现⽗⼦组件之间的通信
    本地存储
    利用ref和refs
    .sync 修饰符
    `$parent和$children`在⼦组件内可以直接通过$parent对⽗组件进⾏操作，在⽗组件内可以直接通过$children 对⼦组件进⾏操作
                        在⽗组件调⽤⼦组件时候要加下标也就是$children 是⼀个数组 因为可以有很多个⼦组件

    provide 和 inject   ⽗组件通过通过 provide 提供变量 ⼦组件中通过 inject 注⼊变量，不论嵌套了⼏层⼦组件 都能通过 inject
                        来调⽤ provide 的数据

    $attr+$listener 如果⽗组件 A 下⾯有⼦组件 B ⼦组件 B 下⾯⼜有⼦组件 C 如果 a 组件的变量和⽅法想要传给组件 C 的时候 就
                    ⽤到这个⽅法 适⽤于多级组件传值
                    在 B 组件中给 C 组件绑定 v-bind="$attrs" v-on="$listeners" 然后在 C 组件中就可以直接使⽤ a 传来
                    的属性和⽅法了（简单来说：$attrs与$listeners 是两个对象，$attrs ⾥存放的是⽗组件中绑定的⾮ Props 属
                    性，$listeners ⾥存放的是⽗组件中绑定的⾮原⽣事件。）
    组件通信⽬的：传递或共享某些数据，解决组件间数据⽆法共享的问题
        props选项作⽤：设置和获取标签上的属性值的
        vue组件化理解：
        1.组件是独⽴和可复⽤的代码组织单元。组件系统是Vue核⼼特性之⼀，它使开发者使⽤⼩型、独⽴和通常可复⽤的组
        件构建⼤型应⽤；
        2.组件化开发能⼤幅`提⾼应⽤开发效率、测试性、复⽤性`等；
        3.组件使⽤按分类有：⻚⾯组件、业务组件、通⽤组件；
        4.vue的组件是基于配置的，我们通常编写的组件是组件配置⽽⾮组件，框架后续会⽣成其构造函数，它们基于
        VueComponent，扩展于Vue；
        5.vue中常⻅组件化技术有：属性prop，⾃定义事件，插槽等，它们主要⽤于组件通信、扩展等；
        6.合理的划分组件，有助于提升应⽤性能；
        7.组件应该是⾼内聚、低耦合的；
        8.遵循单向数据流的原则。

9.$nextTick⽅法有什么作⽤?
        $nextTick也叫做异步更新队列⽅法,⽽$nextTick⽅法的主要作⽤就是等待dom元素加载完毕之后才会执⾏的回调函
        数,我们经常会在$nextTick⽅法⾥⾯`获取dom元素`

10.说⼀下什么是mvvm模式?
    MVVM 是Model代表数据模型，数据和业务逻辑都在Model层中定义；View代表UI视图，负责数据的展示；
    ViewModel负责监听Model中数据的改变并且控制视图的更新，处理⽤户交互操作；
    View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动同步是因
    为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作。