父子组件生命周期

父子组件的生命周期是一个嵌套的过程

  1. 渲染的过程
  • 父 beforeCreate-> 父 created-> 父 beforeMount-> 子 beforeCreate-> 子 created-> 子 beforeMount-> 子 mounted-> 父 mounted
  1. 子组件更新过程
  • 父 beforeUpdate-> 子 beforeUpdate-> 子 updated-> 父 updated
  1. 父组件更新过程
  • 父 beforeUpdate-> 父 updated
  1. 销毁过程
  • 父 beforeDestroy-> 子 beforeDestroy-> 子 destroyed-> 父 destroyed

computed / watch

相同点

  • 基于 vue 的依赖收集机制
  • 都是被依赖的变化触发，进行改变进而进行处理计算

不同点

  1. 入和出
  • computed: 多入单出，多个值变化，组成一个值的变化
  • watch: 单入多出，单个值的变化，进而影响一系列的状态变更
  1. 性能
  • computed: 自动 diff 依赖，若依赖没有变化，会改从缓存中读取当前计算值
  • watch: 无论监听值变化与否，都会执行回调
  1. 写法
  • computed: 必须有 return 返回值
  • watch: 不一定
  1. 时机上
  • computed: 从首次生成赋值，就开始计算运行了
  • watch: 首次不会运行，除非设置 immediate: true

v-for / v-if

  • vue2: v-for > v-if 先循环 再判断
  • vue3: 反过来

key

  1. 模板编译原理: template => dom
    template => 正则匹配语法 —— 生成 AST: 静态 + 动态 => 转换 AST 为可执行方法 => render() => dom
  2. dom diff

自定义指令

1
2
3
4
5
6
7
8
directives: {
  search: {
    update: function() {
      // ……
    }
  }
}
<div v-search></div>

mixin

应用: 抽离公共逻辑 (逻辑相同，但是模板不一样)
合并策略

  • data 冲突时，以组件主体为优先
  • 生命周期钩子会先后执行，先 mixin 后主体
  • 递归合并，递归合并优先级仍以主体优先

extends

应用: 拓展独立逻辑
合并策略: 与 mixin 相同

  • 合并优先级上 mixin > extends
  • 回调优先级 extends > mixin