持续分享/小记

Vue3官方文档解读day2

• Vue3和Vue2的区别
  • 响应式的原理不同
  • v-for和v-if优先级不同
• 事件处理
  • $event
• 侦听器
  • watchEffect()优势:
    1. 简化侦听代码, 自动追踪回调中的响应式依赖
    2. 如果响应式对象层级深, watchEffect()只追踪特定的响应对象属性, 而不必像深度监听那样, 完整的对响应式对象侦听
• $emit(): 可以在模板中向上抛出事件
• defineEmits(): 可以在setup中, 定义组件可能向上抛出的事件 → 返回一个emit()函数, 可以在setup中向上抛出事件
• 动态组件
• defineModel(): 可以简化组件上的v-model双向绑定代码实现
• 透传Attributes
  • 常用于透传class, id, style
• 插槽能访问父级作用域, 不能访问子级作用域
• 条件插槽
  • 结合$slot和v-if做条件渲染
• 作用域插槽
  • 插槽中的name属性, 是一个特殊的属性, 被保留不向上传递
• 依赖注入

其他

• 变量提升机制

  • 特定作用域var声明的变量

  • 函数声明也存在变量提升

    • 函数式声明

    // 这种情况下, 整个函数(包括函数声明, 函数体)都会被提升
    function fn() {}
    

    • 变量形式声明/函数表达式 →

    // 这种情况下, 只有fn被提升了, 且值为undefined
    var fn = function () {}
    

• 执行上下文

  • 变量环境
  • 词法环境
    • 维护一个栈结构
    • 块级作用域

• 暂时性死区: 变量用let或者const声明, 在其得到赋值操作进入词法环境前, 这一段区域, 不可对变量操作, 就是暂时性死区