前端框架及项目面试 vue使用

1.vue的基本使用

模板（指令、插值）
指令、动态属性
v-html：会有XSS风险，会覆盖子组件
computed：有缓存，data不变，则不会重新计算
watch如何深度监听？
watch监听引用类型，拿不到oldVal
class和style

2.条件渲染

v-if v-else的用法，可使用变量，也可以使用===表达式
v-show
如何遍历对象？——也可以用v-for
key 的重要性，key不能乱写，但是必须得有（如random或者index）
v-for和v-if不能一起使用

3.事件

event 参数，自定义参数，是原生的，事件被挂载到当前元素

4.事件修饰符

v-on：click.stop=“doThis” 阻止单击事件继续传播
v-on: submit.prevent=“onSubmit” 提交事件不在重载页面
v-on：click.stop.prevent=“doThat” 修饰符可以串联
v-on：submit.prevent 只有修饰符
v-on：click.capture=“doThis” 添加事件监听器时使用事件捕获模式，就是内部元素触发的事件现在此处理，然后才交由内部元素进行处理
v-on：click.self=“doThat” 只当在event.target是当前元素自身时触发处理函数，就是事件不是从内部元素触发的

5.按键修饰符

@click.ctrl=“onClick” 即使Alt或shift 被同一按下时也会触发
@click.ctrl.exact=“onCtrlClick” 有且只有Ctrl被按下的时候才触发
@click.exact=“onClick” 没有任何系统修饰符被按下的时候才触发

6.表单

v-model
常见表单项 textarea CheckBox radio select
修饰符 lazy number trim

7.Vue组件的使用

props和$emit 父组件到子组件传递一个信息
组件间通讯-自定义事件
组件的生命周期
7.1生命周期（单个组件）

1. 挂载阶段
2. 更新阶段
3. 销毁阶段
   
   生命周期（父子组件）
   index（组件）
   input（组件）
   List（组件）

8.Vue高级特性

不是每个都很常用，但用到的时候必须要知道

自定义 v-model

$nextTick

:data改变之后，dom不会立刻渲染，$nextTick会在DOM渲染之后会被触发，以获取最新dom节点，异步渲染，$nextTick待DOM渲染完在回调，页面渲染时会将data的修改做整合，多次data修改只会渲染一次

slot 动态、异步组件：

基本使用：作用域插槽，具名插槽
动态组件： :is="component-name"用法
需要根据数据，动态渲染的场景，及组件类型不确定
异步组件：
import（）函数
按需加载，异步加载大组件

如何缓存组件

keep-alive
频繁切换，不需要重复渲染
Vue常见性能优化

mixin

多个组件有相同的逻辑，抽离出来
mixin并不是完美的解决方案，会有一些问题

1. 变量来源不明确，不利于阅读
2. 多mixin可能会造成命名冲突
3. mixin和组件可能出现多对多的关系，复杂度较高

vue3提出的Composition API旨在解决这些问题

9.Vuex使用

用于vue组件
dispatch
commit
mapState
mapGetters
mapActions
mapMutations

10.vue-router路由模式

hash模式（默认），如http://abc.com/#/user/10
H5 history模式，如 http://abc.com/user/20
后者需要server端支持，因此无特殊需求可选择前者

Vue-router路由配置 动态路由
Vue-router路由配置 懒加载

11.Vue使用-总结

基本使用，组件使用
高级特性
Vuex和 Vue-router使用