Vue

Vue computed watch

• computed 计算用于产生新的数据
• watch 用于监听现有的数据

Vue 组件的通讯方式

• 自定义事件
• $emit
  • 父子组件 props
• $attrs
  • v-bind
• $parent this.$parent
• $ref this.$ref
• provide inject

vex mutation action 区别

• mutation 原子操作，同步代码；
• action 可包含多个 mutation ；可包含异步代码；

VDOM

用 js 对象模拟 dom 节点数据

• 组件化
• 数据视图分离
• 不用关注 dom 操作

Vue 每个生命周期都做了什么

• beforeCreate
  • 创建一个空白的 vue 实例
• create
  • 完成响应式的绑定
  • data, method 初始化完成
  • 未开始模版的渲染
• beforeMount
  • 编译模版调用 render 生成 vdom
  • 还没有开始渲染 dom
• mounted
  • 完成 do m 渲染
  • 组件创建完成
• beforeupdate
  • data 变化之后 还没有更新 do m
• updated
  • dat a dom 渲染完成
• beforeUnmount
  • 解除一些全局的事件
• unmounted

Vue 什么操作 dom 合适

• $nexTick 渲染 dom
• mounted 和 created 都可以
  • mounted 最合适

Vue3 composition api 生命周期有什么区别

• 用 setup 代替了 beforeCreate 和 created
• 使用 hooks 函数形式 onMounted()

Vue2 Vue3 React diff 算法

• 只比较同一级

• tag 不同则删掉重建 不再去比较内部的细节

• 子节点通过 key 区分

• react

  • 仅仅右移

• vue2

  • 双端移动

• vue3

  • 最长递增子序列

Vue React 为何循环时候使用 key

• vdom diff 会根据 key 元素是否要删除
• 匹配了 key 只要移动元素就好
• 没有匹配到 key 则删除重建

Vue-router Memoryhistory

• hash

• webhistory

• memoryhistory

  • 网页 url 不会变化 像组件一样