Skip to main content

Vue

mixin​

mixin（混入），提供了一种非常灵活的方式，来分发 Vue2 组件中的可复用功能。是不是很熟悉？没错，类似于 react 的自定义 Hook。其实原理就是前置了 mergeOptions 的操作，主要有四个合并策略

  • 替换型，如 props、methods、computed 等。简单的对象合并，key 值相同，优先级高的覆盖优先级低的。组件 对象 > 组件 mixin 对象 > 组件 mixin -mixin 对象 > ... > 全局 mixin 对象
  • 合并型，如 data
  • 队列型，如生命周期函数和 watch 等
  • 叠加型，如 component、filters 等。通过原型链的方式不会相互覆盖，而是 权重小 被放到 权重大 的原型上

详情参考 https://juejin.cn/post/6993115621160386590

vue3 可以通过 composition 替代 mixin

参考​

组件注册【WIP】​

  • 全局注册
  • 局部注册

依赖注入【WIP】​

异步组件【WIP】​

自定义指令【WIP】​

插件【WIP】​

错误处理【WIP】​

一些问题​

v-show 对比 v-if

v-show 只是切换元素的 display，v-if 会重建虚拟 dom，会触发组件的一系列生命周期。如果需要频繁切换，就用 v-show

参考 https://cn.vuejs.org/guide/essentials/conditional.html#v-if-vs-v-show

为什么 v-for 不建议和 v-if 一起使用？

  • vue2: v-for 优先级比 if 高，所以会多做一些无意义的遍历。可以在外层嵌套 <template v-if> 或者通过 computed 提前过滤数组
  • vue3: if 优先级更高，但是此时 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名，因此仍然不推荐一起使用

data 为什么是一个函数？

参考 Vue 关于 data 为什么是函数这件事

watch 和 watchEffect 的区别

参考 https://cn.vuejs.org/guide/essentials/watchers.html#watcheffect