Vue面试题总结

[zchfeng]

1、介绍vue中的常用指令

• v-bind 绑定属性机制，可以简写：
• v-on 绑定时间机制。可以简写@
• v-for 循环
• v-html 已html标签的形式显示
• v-if 条件渲染
• v-show 隐藏/显示
• v-mode 双向数据绑定

2、Vue中常用的时间修饰符

• .prevent: 阻止默认事件；如：@submit.prevent阻止默认事件
• .stop 阻止冒泡事件
• .self 当事件发生在该元素本身而不是子元素的时候会触发；
• .capture: 事件侦听，事件发生的时候会调用
• .once 事件只触发一次

3、谈谈你对MVVM开发模式的理解

• MVVM分别代表Model View ViewModel三者
• Model代表数据模型，数据和业务逻辑都在Model层中定义
• View代表UI视图，负责数据的展示
• ViewModule负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作
• Model和View并无直接关联，而是通过ViewModule来进行联系的，Module和ViewModule之间有着双向数据绑定的关系。因此当Module中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据页也会在Module中同步
• 这种模式实现了Module和View的数据自动同步，因此开发者只需要关注数据的维护操作即可，而不需要自己操作Dom

4、v-if和v-show有什么区别

• v-show

  • v-show是css切换，频繁切换时用v-show
  • v-show仅仅控制元素的显示方式，将display属性在block和none来回切换
  • v-show更加节省性能上的开销
  • v-show对应的值无论是true还是false,对应HTML元素都会存在于浏览器的文档中

• v-if

  • v-if 是条件渲染，当fasle的时候不会渲染
  • v-if 如果是false的话，对应html元素不会再浏览器的文档中

[zchfeng]

5、Vue的生命周期

• 总共分为8个阶段，销毁前/后 载入前/后 更新前/后 销毁前/后
  • beforeCreate--------创建前 组件实例被创建，组件属性计算之前，数据对象data都为undefined， 未初始化。
  • created-------创建后 组件实例创建完成 属性已绑定 数据对象data存在 但dom未生成 $el未存在
  • beforeMount---挂载前 在挂载开始之前被调用：相关的 render 函数首次被调用。
  • monbted ----挂载后 Vue实例挂载完成 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
  • beforeUpdate----更新前 在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
  • updated----更新后 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  • beforeDestroy----销毁前 实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed----销毁后 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
  • activated-----被 keep-alive 缓存的组件激活时调用。
  • deactivated ------ 被 keep-alive 缓存的组件失活时调用。

6、<keep-alive>

• 把切换出去的组件保留再缓存中，可以保留组件的状态或者避免重新渲染
• props
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

[zchfeng]

6、computed、watch、methods的区别

• computed-----计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值再getter执行后会缓存的，只有在它依赖变化之后，下一次获取computed的值时才会重新调用对应的getter来计算，
  • computed可以依赖其他computed甚至其他组件的data
  • 依赖于数据 ，数据更新 ，处理结果自动更新
  • 计算属性的this指向vm实例
  • 在组件调用时，直接写计算属性名即可
  • 有get和set两个选项，常用的是getter方法，获取数据，也可以使用setter方法改变数据；
• watch更像是一个data的数据监听回调，当依赖的data的数据变化，执行回调，在方法中会传入newVal和oldVal。Vue实例将会在实例话时调用$watch()，遍历watch对象的每个属性
• 相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算，methods不会。methods是一个方法，它可以接受参数，而computed不能。

7、组件通信

• 父子组件-props $emit
  • 子组件在props中创建一个属性，用来接收父组件传过来的值；
  • 在父组件中注册子组件；
  • 在子组件标签中添加子组件props中创建的属性；
  • 把需要传给子组件的值赋给该属性
  • 子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
  • 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
• 非子组件通信
  • EventBus
  • Vuex