夜雨聆风
Vue进阶应用之组件化、插件补充拓展与解惑
vue的特征二：组件化
React在组件化上与Vue出奇一致，都是以实例限定组件的方式去完成基础组件化。但是Vue除了基础组件化外，还提供了其他的能力，比如
-
使用组件其实是抽象复用的过程，所以组件需要精简和聚合。
精简：每个组件在多页面上使用。
聚合：把一个组件注入一部分能力，而这个能力可以注入到多个组件内部。
-
组件化需要关注渲染顺序：父组件和子组件
-
created：创建实例new Vue()，它是实例化的过程，先渲染父组件再渲染子组件；
-
mounted：代表渲染，先渲染子组件再渲染父组件，需要子组件全部渲染完才会渲染组件；
-
destoryed：代表销毁，顺序是由内到外，先子组件再父组件；
mounted() {console.log('son $slots, vm', this.$slots, this)},created() {console.log('son $slots, vm', this.$slots, this)},// created 父->子// mounted 子->父
-
混入mixin：逻辑混入
-
在Vue2中强推混入该功能，而在Vue3则不强推也不抛弃的状态。
应用范围：mixin是用来抽离公共逻辑（比如遇到逻辑相同并且重复可拆离的场景，可以使用mixin）
mixin和extends对比
-
extends是继承，是一个完整对象继承给另一个对象，强调的是一个核心逻辑的继承；
-
minxin是公共逻辑拆离，强调的是公共逻辑，不具备完整的业务逻辑，是部分Vue逻辑拆离；
-
vue3，以js的形式编程，基本就是纯hook应用，因此extends也被去掉了；
mixin.js文件以通用核心逻辑的部分代码块的模式混入到helloWorld.vue文件中。
// helloWorld.vue<template><divclass="hello">{{ obj }}</div></template><script>import demoMixin from './fragments/demoMixin'// import demoMixin1 from './fragments/demoMixin1'export default {name: 'HelloWorld',mixins: [demoMixin], // 注册Mixin// mixins: [demoMixin, demoMixin1], // 注册多个Mixinmounted() {// 组件的生命周期console.log('son2 $slots, vm', this.$slots, this)},created() {// 组件的生命周期console.log('son2 $slots, vm', this.$slots, this)},data() {return {slotProps: 'zhaowa scope slot',money: 100,// obj: '我就是obj'}},filters: {moneyFilter(money) {console.log('moneyFilter', this)return money > 99 ? 99 : money}}}</script>
import demoMixin1 from "./demoMixin1"export default {data() {return {msg: 'im mixin',obj: {title: 'mixinTitle',header: 'mixinHeader'}}},mixins: [demoMixin1],mounted() {// 混入的生命周期console.log('mixin mounted')},created() {// 混入的生命周期console.log('mixin created')}}
export default {data() {return {msg: 'im mixin1',obj: {title: 'mixinTitle1',header: 'mixinHeader1'}}},mounted() {// 混入1的生命周期console.log('mixin1 mounted')},created() {// 混入1的生命周期console.log('mixin1 created')}}
mixin的合并策略是什么？
-
生命周期的合并策略：永远都是后者覆盖前者，混入的生命周期执行完才会执行组件的生命周期，即先内再外。
-
单一mixin场景：生命周期mixin存在于组件之前，即先执行mixin的生命周期再执行组件的生命周期。
-
多个mixin场景：后者覆盖前者，即按照引入注册顺序挨个加载。
-
变量的补充：
-
组件和mixin都有obj的变量名，那么mixin的obj不会被渲染。即mixin永远不会覆盖本体已有的变量。
-
当组件没有obj，而多个mixin都有obj，按照引入注册后者覆盖前者；
-
在mixin文件内是不建议再注入mixin的，虽然可以，但是不建议。混入相当于代码层面的一个混合，因此在外面混入也是一样的。既然要抽离代码，都要纯粹一点。
在Vue2中，mixin的大前提是我们把部分vue的代码以代码碎片或者代码模块的形式封装在js文件里，然后再把这个js文件给放到vue文件中。
在Vue3中，Vue本身是componsitionAPI，直接使用setup，直接命名useXXX.js，再暴露出useFunction函数方法。然后引入import {useFunction} from useXXX，在当成函数去使用即可。因此在Vue3中可以使用hook去代替Vue2的mixin。
// useAddon.jsexport const useFunction = money => {return money > 99 ? 99 : money}
<template><divclass="hello"><p>Vue3</p></div></template><scriptsetup>import { useFunction } from './fragments/useAddon'useFunction()</script>
vue的特征三：插件补充拓展
-
Vue把自己做成一个基座，可以对Vue做一个插件的拓展。
题外话：
为什么Vite创建Vue项目不再需要babel配置？
因为Vite底层是基于rollup实现，有些配置已经提前封装好了。
个人能力提升赛道建议：
-
写业务；
-
读源码，理解原理；读element Plus源码
-
基于原理，再应用；源码+业务=架构能力
