Vue 面试知识点

Unsplash

• class 和 style 使用动态属性，使用驼峰式写法

• v-if和 v-show
v-if 不渲染不满足判断条件的模块，v-show 渲染但不显示，使用场景：是否多次切换或频繁更新条件状态

• keep-alive 缓存组件，使用场景：频繁切换，不需要重复渲染

• v-for 中添加唯一的 key
  为了高效的更新虚拟 DOM，会根据 key 值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素，添加方式：key="'list_' + index"

• mixin 抽离多个组件里的公共逻辑
  缺点：变量来源不明确，不利于代码阅读；多个 mixin 可能会造成命名冲突；mixin 和组件可能会出现多对多关系，复杂度高

• $nextTick
  Vue 是异步渲染，data 改变后，DOM 不会立刻渲染，页面渲染时会将 data 的做整合，$nextTick 会在 DOM 渲染完之后执行延迟回调，减少 DOM 操作次数，提高性能

• 组件 data 为什么返回函数
  两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰

Component.prototype.data = {
  message: 'hello'
}
Component.prototype.data = function() {
  return {
    message: 'hello'
  }
}

• 组件化
  传统组件，只是静态渲染，更新还要依赖于操作 DOM
  Vue MVVM 数据驱动视图，修改 Model 数据；ViewModel 监听事件、指令；View 渲染

• 动态组件 :is

// 列表页：轮播图、文章、视频、图片

  

• 异步组件 import

comments: {
  Tab: () => import('../comments/Tab')
}

• 计算属性和侦听器
  computed 有缓存，data 不变则不会重新计算，监听值类型可正常拿到 oldVal
watch 一般用于监听数据变化的同时，进行异步操作或者是比较大的开销，监听引用类型拿不到 oldVal，因为指针相同，此时已经指向了新的 Val

• Vue 生命周期（创建、挂载、更新、销毁）
  beforeCreate
created 页面还没有渲染，但 Vue 实例已经初始化了，可以调用 methods 中的方法、改变 data 中的数据，使用场景：发送请求获取数据
  beforeMount
mounted 页面已经渲染完毕，可以获取到 el 中的 DOM 元素，进行 DOM 操作
  beforeUpdate
updated
beforeDestroy 清除定时器、自定义事件
  destroyed

• 父子组件创建、更新顺序
  父组件 created 子组件 created 子组件 mounted 父组件 mounted
  父组件 beforeUpdate 子组件 beforeUpdate 子组件 updated 父组件 updated

• 组件之间的传值通信
  父组件给子组件传值通过 props
  子组件给父组件传值通过 $emit 触发回调
  其他组件通信，通过实例一个 Vue 实例 event 作为媒介，要相互通信的组件之中，都引入 event

• 动态路由配置（路由懒加载）

{
  path: '/user/:id',
  component: () => import('../components/User')
}

• vue-router 路由模式
  hash 模式 url 多了 # 号，它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，不需要后台进行配置，因此改变 hash 不会重新加载页面
  history 模式 利用了 pushState() 和 replaceState() 方法，history 模式改变了路由地址，因为需要后台配置地址

History.pushState() 方法用于在历史中添加一条新记录，浏览器地址栏立刻显示新地址，但并不会跳转，它只是成为浏览历史中的最新记录
History.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个

• 事件修饰符

...


...

• 表单部分

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^