xuan-blog

# 这是Vue笔记

# Vue3响应式原理

vue通过Proxy代理需要响应式的对象。然后在访问对象属性的时候，会将原始对象作为键，map的集合作为值，塞入到一个weakMap集合，而Map的键是该对象的属性。值是一个Set的集合，Set的每一项就是访问了该对象属性的副作用函数。然后在修改对象属性的值时，将属性对应的set集合中的副作用函数依次执行一遍。

# 细节点：

  1. 当副作用函数是匿名函数时，如何收集依赖。 设置activeEffect全局变量，在副作用函数执行前，现将副作用函数存入activeEffect变量中，然后在副作用执行时，将activeEffect塞入对应key的依赖集合。
  2. 分支切换导致的遗留副作用函数问题 对副作用函数做一层封装，封装函数会清理包含自身的依赖集合，然后将自身赋值给activeEffect，最后执行副作用函数。外部给封装函数设置对应的deps数组格式的属性，该数组会在track的时候塞入包含封装函数的依赖集合。清理就是遍历封装函数的deps数组。
  3. 分支切换处理导致的死循环问题 trigger的时候，遍历依赖集合执行副作用函数，副作用函数内部先清理了自身又在track的时候将自身加进了依赖集合，会导致死循环。解决方法就是在执行依赖集合前，现将依赖集合备份给另一个集合。然后遍历新集合。

# Vue组件通信方式

  1. props/emits：父子
  2. ref/refs：父子
  3. $children/$parent：父子
  4. eventBus：全局
  5. provide/inject：父子
  6. Vuex、Pinia：全局
  7. $attrs/$listeners：父子
  8. localStorage/sessionStorage：全局
  • 一个组件本质上是一个拥有预定义选项的一个 Vue 实例
  • 不要在选项 property 或回调上使用箭头函数
  • Vue 不是基于字符串的模板引擎
  • 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date
  • 指令可接受动态参数，但是有一定的限制，例如不能包括空格和引号。
  • HTML attribute会被强制转成小写。
  • 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
  • 对于class和style属性，vue做了专门的增强，可以传数组或者对象。
  • v-bind:style的css property会自动添加前缀。也支持多重值。
  • v-if是堕性的。
  • v-for 具有比 v-if 更高的优先级
  • v-for可以使用of替代in作为分隔符。因为它更接近 JavaScript 迭代器的语法。但是效果并没有啥区别。
  • v-for即可以遍历对象也可以遍历数组。遍历对象按照Object.keys()的结果遍历。
  • Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
  • is属性可以避开一些潜在的浏览器解析错误。例如
    • 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
    • .capture修饰符表示添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。
    • .self修饰符表示只当在 event.target 是当前元素自身时触发处理函数。
    • .passive修饰符表示滚动事件的默认行为 (即滚动行为) 将会立即触发。提升移动端的性能。
    • 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名.
    • .exact修饰符允许你控制由精确的系统修饰符组合触发的事件.
    • 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
    • Vue 的 元素的 is attribute 可以接受一个组件的名称或者组件的选项对象。
    • 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。
    • 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
    • prop 会在一个组件实例创建之前进行验证
    • 非prop的attribute 会被添加到这个组件的根元素上。
    • class 和 style attribute 会稍微智能一些，即里外两边的值会被合并起来，从而得到最终的值。
    • inheritAttrs: false 选项不会影响 style 和 class 的绑定。
    • Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器
    • 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
    • 动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
    • 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。