Vue
# vuex
dispatch 触发 actions，commit 触发 mutations，在 mutation 里修改 state
- state 使用，this.$store.state.变量名
- mutations 使用，同步更新，this.$store.commit('increment')
- actions 使用，可以同步也可以异步，this.$store.dispatch('函数名')
- modules 使用，分模块，加 namespace 进行区分。 this.$store.state.模块名.变量名 this.$store.commit('模块名/increment') this.$store.dispatch('模块名/increment')
- 辅助函数 mapActions，mapMutations，mapState
# 路由守卫
- beforeRouteEnter 组件路由被确认前调用，不能只用 this，可以用 next 解决
- beforeRouteUpdate 当前路由改变，组件被复用时调用
- beforeRouteLeave 离开组件路由调用
- this.$router.go(): 原页面表单中的内容会丢失
- this.$router.go(-1) // 后退+刷新
- this.$router.go(0) // 刷新
- this.$router.go(1) // 前进
- this.$router.back(): 原页表表单中的内容会保留
- this.$router.back() // 后退
- this.$router.back(0) // 刷新
- this.$router.back(1) // 前进
# 组件 data 为什么要写成函数形式
如果是对象形式，每次引入组件指向的地址都是同一个，会遭横数据混乱
# 渲染大量数据的优化
无论是浏览器的 dom 和 bom，还是 nodejs，都是基于 js 引擎开发的，bom 和 dom 最终都要转化成 js 引擎能处理的数据，这个过程很耗时，所以在浏览器中操作 dom 很消耗性能
- 使用 createDocumentFragment 文档片段创建虚拟节点，当所有节点创建完毕后，一次性把虚拟节点里的 li 全部渲染出来
- 使用分段渲染，一次渲染部分数据
- 使用 requestAnimationFrame 逐帧渲染
# 列表组件中 key 的作用
- 对于大多数场景来讲，列表组件都有自己的状态，不带 key 会复用之前的状态
- key 的作用是更新组件时，判断两个节点是否相同，如果相同就复用，不同就删除重新创建
# 双向数据绑定的实现
- vue2 通过 defineProperty 数据劫持监听数据的 get 和 set，需要深度克隆数据作为中间值，因为 get 里操作数据本身会陷入死循环
- vue3 通过 proxy 进行数据代理，可以操作数据本身
- 数据更改触发 set，在 set 里修改页面数据
- 视图更改监听 input 和 change 事件，更改数据
- defineProperty
- 采用数据劫持结合发布订阅方式，通过 Object.defineProperty()来劫持各个属性的 setter、getter，当数据变化时发布消息给订阅者触发相应监听回调，
- 将 MVVM 作为数据的入口，整合 Observer、compile、Watcher，通过 Observer 来监听 model 的数据变化，通过 compile 来编译模板指令，最终通过 Watcher 搭建 Observer 和 Compile 之间的通信桥梁，达到数据变化-视图更新、视图变化-数据更新的双向绑定效果
# 父子组件传值
- ref
- $parent，$children
- props，$emit 属性传递
- provide，inject 上下文。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效
- $attrs，$listeners
# 非父子组件传值
- 本地存储，vuex，localStorage
- 使用 eventBus，创建一个事件中心，可以用它来传递事件和接收事件
# 生命周期的理解
- updated 对所有数据的变化进行统一处理
- watch 对具体某个数据变化做统一处理
- nextTick 是对某个数据的某一次变化进行处理
# 父子组件生命周期顺序
# 首屏加载优化
- 减少公共资源模块打包体积
- 骨架屏
- 服务端渲染
# koa 原理剖析
# 路由 hash、history
- 再浏览器中有#，用 window.location.hash 获取。hash 虽然在 URL 中，单不背包含在 http 请求中，不会重新加载页面
- history 采用 html5 的特性，pushState、replaceState 可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更
# proxy 路由代理
在 vue.config.js 里配置
- target，请求地址
- pathRewrite，地址重写规则
# keep-alive
切换路由可以缓存组件
- 生命周期，activated，deactivated
# nuxt.js 服务端渲染
- 路由，根据 pages 目录自动生成路由
- 入口页面，layouts/default.vue
- 优点，利于 SEO，加快首屏渲染
# 多页面
- public 文件夹添加入口文件
- vue.config.js 配置入口文件
- views 文件夹分模块配置 vue 项目
# computed 实现
- 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例，每个函数提供的函数作为属性的 getter，使用 Object.defineProperty 转化，用于数据发生变化时触发重新计算属性
- 若出现当前 computed 嵌套其他 computed 时，优先计算其他属性
- computed 能实现的，watch 都能实现，反之则不行
# watch 深度监听
// 监听 c
- 'a.b.c': function(new, old) { } //
- a: { deep: true, // 为 true 开启深度监听，a 对象里任何数据的变化都会触发 handler 函数 handler() { } }
# complier 实现
- 模板解析，将 template 转化成 render 字符串
- parse 过程，将 template 用正则转化成 AST 抽象语法树
- optimize 过程，标记静态节点，diff 过程跳过静态节点，提升性能
- generate 过程，生成 render 字符串
# 虚拟 dom
# 静态图片打包后的路径
- css 中的静态路径
- img 标签的 src
- import()
- require()
- URL // new URL(
./assets/1.jpg, import.meta.url) // vue3
# 其他
- v-for 优先级高于 v-if，使用 computed 过滤掉需要不需要循环的数据