vue面试题

1. 常用指令:
   v-html: innerHTML
   v-text: innerText
   v-once: 只渲染一次
   v-pre: 不进行编译
   v-bind: 属性绑定(简写:属性名)
   v-on: 事件绑定(简写@事件)
   v-model: 双向绑定 表单控件 :value和@input的语法糖
   v-if 控制节点内容是否存在来进行显示
   v-show 节点存在,控制css节点来进行显示
   v-cloak: 防止闪烁 [v-cloak]{ display:none }

2. vue双向绑定数据的原理 :

• 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

3. v-if和v-show的区别

• v-show  是通过css中的display来进行的显示与隐藏,占有之前的位置
• v-if    是通过创建跟消除
• v-show适合多次使用,v-if适合单词或极少数的切换

4. 生命周期有哪些钩子函数，常用来做什么事
   • beforeCreate 创建之前 不能操作data里面的数据，因为数据还没有初始化好！
   • created 创建之后 最先开始可以获取data里面数据的地方！ 【重要！】 可以请求数据！
   • beforeMount 挂载之前
   • mounted 挂载之后 【重要！】 DOM编译完成！存在真实的DOM节点！ 请求数据！ 插件初始化！
   • beforeUpdate 更新之前
   • updated 更新之后 【重要！】 插件初始化！
   • beforeDestroy 消亡之前 重要 【判断是否保存了！】
   • destroyed 消亡之后 重要 释放一些相关信息（定时器！等等！）

5. vuex核心属性:
   state(唯一的公共资源)、
   getters(对state中的数据进行加工处理形成新的数据)、mutations(修改state的唯一方式)、
   actions(异步调用mutations的方法去修改state)、
   modules( 在大型项目下，数据状态很多，修改方法也很多，所以需要分模块化管理，这样更加高效！)

6. vuex怎么修改state中的数据

• 直接修改state 与 用dispatch／commit来修改
  this.$store.state.变量=xxxthis.$store.dispatch(actionType, payload)
• 或者： this.$store.commit(commitType, payload)

7. vuex 模块化之后如何调用其他模块的方法和属性
   commit和dispatch
   路径和模块名对应的方法

8. 组建通信方式

• 父子通信 : 组件模板里面 自定义属性props 子模板JS props:[“自定义属性名”] 父模板:子组件 自定义属性名=“数据”
  props有多重验证:type类型,default默认值,validator自定义校验功能
  单向数据流:所有数据自上而下的流动,不能直接修改props属性
• 子父通信 :父模板:@自定义事件名=“父的事件函数”
  父JS:methods:{父的事件函数(形参){…}}
   子组件:this.$emit(‘自定义事件名’,实参)
• 兄弟通信:$on(‘自定义事件’,传参){}   $emit{(}^{\prime }自定义事{件}^{\prime },传参)组件1模板里面触发函数,函数里面$emit触发自定义事件,
  组件2 $on监听自定义事件(需要先实例化一个空的vue对象)

9. 页面之间传参

• 本地存储，一个页面设置，一个页面读取
• ! 动态路由
  • /地址/数据 【A页面】
  • this.$route.params.标识符 获取数据 【B页面】
• ! query传参
  • /地址?属性名=值 【A页面】
  • this.$route.query.属性名 【B页面】
• ! hash传参
  • /地址#属性名=值 【A页面】
  • this.$route.hash 然后再处理得到信息 【B页面】
• ！vuex

10. 计算属性和方法有什么区别

• 计算属性computed 计算属性是依赖于响应式缓存
• 方法methods 每次都会被调用

11. 计算属性和监听器有什么区别

• watch 是监听data里面数据的变化
• computed 是对data里面的数据进行处理

12. 怎样实现前台的权限管理

• 权限管理是基于RBAC完成的， 就是不同用户会有不同的角色，每个角色会有不同的菜单信息，从而决定了我们的用户能看到不同的菜单页面。
• 最核心的是让不同的用户有不同的路由映射表，也就觉定了他可以看到不同的页面，且不能访问他没有路由映射的页面
  通过 router.addRoutes方法添加到路由映射表里面
• 也可以直接返回数组,数组里面就是能访问的所有页面,再导航守卫判断进入的页面在不在数组当中
• 如果是节点级别的权限管理，后端返回该用户所对应角色的所有可以操作的节点标识符，我们通过自定义指令实现判断这些标识符所对应的按钮是否可以显示。

13.vue的render函数是什么？如何使用

• 渲染DOM,生成模板
• 通过函数自定义DOM

14、路由懒加载是什么？ 如何实现？为什么要懒加载？

• 为什么： 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
• 是什么：路由被访问的时候才加载对应组件
  如何实现：// 路由映射
  {path:’/地址A’,
  component: ()=>import(组件地址) // 懒加载}

15. 页面不响应问题?怎么解决

• 问题: data一进来就会加载set跟get,数组和对象改变不会影响
• 解决:$set方法

16. 表单控件双向绑定的核心指令?有什么注意点

• 核心指令:  v-model
• 注意： 单选:每个input都要有 value值； 多选:绑定的是一个数组，每个input也必须有value值

17.⭐⭐⭐ sync 修饰符

• 目的是说明某个自定义属性绑定的变量是由组件内部和外部一起控制的，解决组件上面只有一个v-model的问题 本质就是 父子通信的一种方式
  <组件 :props属性名=“父里面的变量” @update:属性名="父里面的变量=$event"/><子组件this.$emit(“update:active-index”, 实参); />
  简写为: :props属性名.sync=“父的变量”

18. 如何实现刷新页面

• 方式1：
  • 通过给router-view添加v-if指令，控制组件重新渲染，从而实现刷新。
• 方式2：
  • 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好
• 方式3：
  • 为了实现刷新页面，可以先跳转到一个空页面，然后马上跳回来，从而实现这个功能

19. $route和$router分别是什么

• $route是“路由信息对象",包括了
• path 路径地址
• params 动态路由数据
• hash hash数据
• query search数据
• fullPath 完整地址
• matched 路由匹配 （可用于制作面包屑）
• name 路由名称
  $router是“路由实例”对象包括了路由的跳转方法，钩子函数等,包括了push/replace/go/back/forward,beforeEach/afterEach/…

20. Vuex是什么,有什么作用

• Vuex 是一个仓库,专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation
  通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
  vuex它可以实时更新，本地存储不能

21. vue的渲染过程

• 调用 compile 函数,生成 render 函数字符串 ,编译过程如下:
  parse 函数解析 template,生成 ast(抽象语法树)
  optimize 函数优化静态节点 (标记不需要每次都更新的内容,diff 算法会直接跳过静态节点,从而减少比较的过程,优化了 patch 的性能)
  generate 函数生成 render 函数字符串
• 调用 new Watcher 函数,监听数据的变化,当数据发生变化时，Render 函数执行生成 vnode 对象
• 调用 patch 方法,对比新旧 vnode 对象,通过 DOM diff 算法,添加、修改、删除真正的 DOM 元素

22. keepalive是什么,怎么用

• keepalive是组件缓存
• 获取 keep-alive 包裹着的第一个子组件对象及其组件名
  根据设定的 include/exclude（如果有）进行条件匹配,决定是否缓存。不匹配,直接返回组件实例
  根据组件 ID 和 tag 生成缓存 Key,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该 key 在 this.keys 中的位置(更新 key 的位置是实现 LRU 置换策略的关键)
  在 this.cache 对象中存储该组件实例并保存 key 值,之后检查缓存的实例数量是否超过 max 的设置值,超过则根据 LRU 置换策略删除最近最久未使用的实例（即是下标为 0 的那个 key）
  最后组件实例的 keepAlive 属性设置为 true,这个在渲染和执行被包裹组件的钩子函数会用到,这里不细说

23. 什么是混入,怎么用

24. 缓存组件要注意什么？

• 缓存组件抱起来的组件将会被缓存，下一次打开的时候不会被再次创建（所以前四个生命周期不会再次被创建），所以我们不能把组件一打开就要做的放在created 或 mounted里面，因为组件不会再次创建。我们需要放在activated钩子里面。

25. 怎么定义一个自定义指令?钩子有哪些?
    // 全局注册指令 Vue.directive(‘指令名’, {配置选项})
    // 局部注册{ directives:{指令名:{ 配置选项 }} }

• 钩子:
  bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
  我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
  componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  unbind：只调用一次，指令与元素解绑时调用。
• 作用：当我们希望对原生的DOM节点，或者组件 都做 某一类型的操作的时候（如：页面已进入输入框就获取焦点；如输入框一旦加上某个指令就可以实现自动验证），我们就可以用自定义指令来开发我们想要的功能

26. 辅助函数的用法?

• 使用mapState辅助函数, 利用对象展开运算符将state混入 computed对象中
  import {mapState} from ‘vuex’
  export default{
  computed:{
  …mapState([‘price’,‘number’])
  }
  }
• 使用mapActions辅助函数,在组件中这么使用
  methods:{
  …mapActions({
  setNumber:‘SET_NUMBER’,
  })
  }
  然后调用this.setNumber(10)相当调用this.$store.dispatch(‘SET_NUMBER’,10)
• 使用mapMutations辅助函数,在组件中这么使用
  import { mapMutations } from ‘vuex’
  methods:{
  …mapMutations({
  setNumber:‘SET_NUMBER’,
  })
  }
  然后调用this.setNumber(10)相当调用this.$store.commit(‘SET_NUMBER’,10)