Vue面试题笔记1-vue的使用

Vue 的基本使用

---

指令、插值

• 插值、表达式
• 指令、动态属性
• v-html：会有 XSS 风险，会覆盖子组件

computed 和 watch

• computed 有缓存，data 不变则不会重新计算
• watch 如何深度监听
• watch 监听引用类型，拿不到 oldVal (因为指针相同，此时已经指向了新的 val)

class 和 style

• 使用动态属性
• 使用驼峰命名法

条件渲染

• v-if v-else 的用法，可使用变量，也可以使用 === 表达式
• v-if 和 v-show 的区别
• v-if 和 v-show 的使用场景：不频繁/频繁 切换

循环(列表)渲染

• 如何遍历对象 – 可以使用 v-for
• key 的重要性，key 不能乱写 (如 random 和 index)
• v-for 和 v-if 不能混用

事件

• event 参数，自定义参数
• 事件修饰符、按键修饰符
• 观察事件被绑定到哪里
• 事件修饰符
• 按键修饰符

表单

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

Vue 组件使用

• props 和 $emit
• 组件间通讯 – 自定义事件 (eventBus)
• 组件生命周期

生命周期 (单个组件)

• 挂载阶段 created mounted

  created 并未开始渲染，Vue 实例已初始化完毕，仅存在于内存
  mounted 渲染完毕

• 更新阶段 updated
• 销毁阶段 destroyed

生命周期 (父子组件)

• created 创建：外到内(父到子)
• mounted 渲染：内到外
• updated 更新：由外到内开始，由内到外结束
• destroyed 销毁：由外到内开始，由内到外结束

---

Vue 高级特性

---

自定义 v-model

<template>
  <!-- 例如：vue 颜色选择 -->
  <input type="text" :value="text1" @input="$emit('change1', $event.target.value)" />
  <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要对应起来
        3. text1 属性对应起来
    -->
</template>

<script>
  export default {
    model: {
      prop: 'text1', // 对应 props text1
      event: 'change1',
    },
    props: {
      text1: String,
      default() {
        return ''
      },
    },
  }
</script>

$nextTick

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

slot

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码,填充的内容会替换子组件的标签。

• 基本使用
• 作用域插槽
• 具名插槽

动态组件

• :is=“component-name” 用法
• 需要根据数据，动态渲染的场景。即组件类型不确定

异步组件 (常用)

• import() 函数
• 按需加载，异步加载大组件
• 例如：() => import('./my-async-component')

keep-alive

• 缓存组件 (不销毁)
• 频繁切换，不需要重复渲染
• Vue 常见性能优化
• 例如：tab 切换

mixin

• 多个组件有相同的逻辑，抽离出来

• mixin 并不是完美的解决方案，会有一些问题

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

• mixins: [myMixin] 可以添加多个，会自动合并

• 问题：

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

---

vuex

---

vuex 基本概念

• state
• getter
• action
• mutation

用于 Vue 组件

• dispatch
• commit
• mapState
• mapGetters
• mapActions
• mapMutations

---

Vue-router

---

路由模式

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

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

• 动态路由 { path: '/user/:id', component: User }
• 懒加载 { path: '/user', component: () => import('./xxx') }