vue高频面试题...

1. V-model双向数据绑定原理

2. Vue生命周期

3. watch和computed区别

4. V-for必须有key,key绑定索引index可以吗？

5. Vue如何实现权限管理

6. 路由守卫

7. Vuex五个模块

8. Vuex页面刷新数据丢失怎么解决

9. Vue组件通信方式

10. 你做过那些Vue性能优化

1. V-model双向数据绑定原理

Vue双向绑定是通过数据劫持 结合发布者—订阅者模式的方式来实现。

就是数据和视图同步，数据发生改变，视图跟着改变；视图发生变化，数据也随之发生变化。

核心Object.defineProperty()方法，通过该方发来劫持各个属性的setter/getter,在数据变更时发布消息给订阅者，触发相应的监听回调。

V-model是一个语法糖，常用于表单于组件之间的数据绑定，v-bind绑定一个value属性，v-on给当前元素绑定input事件。

2. Vue的生命周期

beforeCreate(创建前）：数据还没有挂载，无法获取data和真实DOM，是undefined。

Created(创建后）：可获取Data、可以获取数据、更改数据（不会触发updated），此时虚拟DOM若要访问DOM，通过vm.$nextTick 

beforeMount(挂载前）：虚拟DOM运行完毕 但是没有渲染到页面中

Mounted(挂载后）：虚拟DOM成功渲染到浏览器，获取到真是DOM,数据完成双向绑定

beforeUpdate(更新前）： 数据在虚拟DOM更新完毕、还未渲染成真实DOM

Updated(更新后）： 数据更新完毕（不要在这里改动数据）

beforeDestroy（销毁前）:    实例销毁前调用，还未销毁，可以清楚定时器，解绑全局事件，销毁插件对象等。

destroyed(销毁后） ： 组件已被拆解，数据绑定被卸除，监听被移除，子实例也统统被销毁

3. watch和computed区别

用于监听数据变化的属性

watch ： 是监听一个值的变化而执行的回调，可支持异步；

               函数名必须和data中的数据名一致，有 两个参数，新/旧；

               只会监听值是否变化，不会监听地址是否变化；

               深度监听配deep:true 页面首次加载监听用immedeiate:true;(使用场景：当一条数据影响多条数据的时，列如 搜索框）；

computed：是计算属性，必须有return返回，不能有异步；

                    函数所依赖的属性没发生变化时，从缓存中读取；

                 （使用场景：一个属性受多个属性影响时，列如购物车商品结算 ）

4. V-for必须有key,key绑定索引index可以吗？

        为了给vue一个提示 跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每一项提供一个唯一的key元素。无key属性时，状态默认绑定的是位置；有key属性，状态根据key属性值绑定到相应的数组元素

        如果key绑定的是数组中的索引index，会造成执行时相当于没有优化遍历过程，只增加了唯一性，而且唯一性也在变动。

5. Vue如何实现权限管理

        （1）路由权限：用户登录后只能看到自己权限内的导航菜单，且只能访问自己权限内的路由地址。

        （2）视图权限：用户只能看到自己权限内的内容和按钮

        （3）请求权限：越权请求将其拦截

        （4）接口权限：用户登录成功获得一个token,通过axios请求拦截器请求头里携带token进行拦截

         （5）按钮权限：自定义指令进行按钮权限的判断，首先配置路由，根据name字段作为和后端返回菜单的唯一标识；

         （6）菜单权限：

                        a.  菜单与路由分离，菜单由后端返回。前端定义路由信息，根据路由name字段作为和后端返回菜单的唯一标识；

                        b.  菜单和路由都由后端返回；

           （7）路由权限:

                        a.  路由初始化时挂载全部的录音，标记相应权限信息，路由跳转时做检查

                        b.  初始化时挂载不需要的权限路由，如登录页。登陆后根据用户权限筛选有权限的路由，在全局路由守卫里进行调用addRoutes添加路由        

6. 路由守卫

        路由守卫就是保护路由的安全（需要某种权限）

        （1）前置路由守卫：初始化的时候被调用，每次路由切换之前被调用

                        router.beforeEach((to,from,next)=>{})

                        to: 要到那个路由

                        from：来自哪个路由

                        next：是否允许去，允许就是next（）

                如果很多路由需要在切换时做判断，可在路由配置项设置一个值，判断该路由是否需要授权；可在路由配置项meat里设置信息，每次路由切换之后被调用

        （2）后置路由守卫

                初始化的时候被调用，每次路由切换之后被调用

                router.afterEach((to,from)=>{})

          (3)  独享路由守卫

                  只有前置，没有后置，写在路由配置中，是某个路由所享，beforeEnter

           (4)   组件内路由守卫

                   写在组件中的路由守卫，不写在路由配置文件中。beforeRouteEnter

7.  vuex五个模块

        state ：统一定义公共数据；获取数据直接使用：this.$store.state.xxx;

                     map辅助函数：computed : { ...mapState: (["xxx"])}

        mutations：用来修改数据（类似于methods）,不能放异步

                                this.$store.cpmmit('mutation名‘ ，载荷）来调用

                                map辅助函数 ：

                                        methods: {...mapMutations({‘新名字' : 'mutations名‘ }）}

        getters :  对现有的状态进行重新计算获得新的数据，（类似computed）

        actions :  发起异步请求

        modules :  模块拆分

        

8. vuex 页面刷新数据丢失怎么解决

        需要做vuex数据持久化，一般使用本地存储的方法来保存数据

        推荐使用Vue-persist 插件。无需手动存取storage,直接将状态保存至cookie 或者 localStorsge中。（为vuex持久化存储而生）

9. Vue组件通信方式

        1. props /  $emit

         2. $children / $parent 

         3.  provide/ reject

         4. ref

         5. eventBus

         6. vuex

          7. localStorage /  sessionStorage

10.  你做过那些vue性能优化

        编码：不要再模块中写太多表达式

                    尽量减少data中的数据，不需要响应式的数据不要放在data中

                     computed 和 watch 区分场景使用

                      v-if 和 v-for 不能连用

                      减少http请求，减少页面中资源数量