Vue3开发效率总结

https://zhuanlan.zhihu.com/p/601715098

依赖注入

依赖注入：将实例变量传入到一个对象中去
在Vue中父组件中声明依赖，将他们注入到子孙组件实例中去，很大程度上代替全局状态管理的存在

// 代码案例
// ========================= parent.vue ========================= 
<template>
    <child @setColor="setColor"></child>
    <button @click="count++">添加</button>
</template>

<script >
import { defineComponent, provide, ref } from "vue";
import Child from "./child.vue";
export default defineComponent({
    components: {
        Child
    },
    setup() {
        const count = ref(0);
        const color = ref('#000')
        provide('count', count)
        provide('color', color)
        function setColor(val) {
            color.value = val
        }
        return {
            count,
            setColor
        }
    }
})
</script>
// ========================= child.vue ========================= 
//使用inject 注入
<template>
    <div>这是注入的内容{{ count }}</div>
    <child1 v-bind="$attrs"></child1>
</template>

<script>
import { defineComponent, inject } from "vue";
import child1 from './child1.vue'
export default defineComponent({
    components: {
        child1
    },
    setup(props, { attrs }) {
        const count = inject('count');
        console.log(count)
        console.log(attrs)
        return {
            count
        }
    }
})
</script>

Vue3基础使用

<template>
  <div ref='composition'>测试Composition API</div>
</template>
<script>
  import {inject, ref, onMounted, computed, watch} from 'vue';
  export default {
    set(props, {attrs, emit, slots, expose}) {
      // 获取页面元素
      const composition = ref(null);
      // 依赖注入
      const count = inject('foo', '1');
      // 响应式结合
      const num = ref(0);
      // 钩子函数
      onMounted(() => {
        console.log('这是个钩子');
      }); 
      // 计算属性
      computed(() => num.value + 1)
      // 监听值的变化
      watch(count, (count, preCount) => {
         console.log('这个值改变了');
      });
      return {
        num,
        count,
      }
    }
  }
</script>

通过getCurrentInstance获取组件实例

getCurrentInstance支持访问内部组件实例，通常情况下被放在setup中获取组件实例
getCurrentInstance只暴露给高阶使用场景。
getCurrentInstance的主要作用：【逻辑提取】替代Mixin
=> 抽取通用逻辑提高系统内聚性，降低代码耦合度。
如下element-plus代码中利用getCurrentInstance 获取父组件parent中的数据，分别保存到不同的变量中，我们只需要调用当前useMapState即可拿到数据

// 保存数据的逻辑封装
function useMapState<T>() {
  const instance = getCurrentInstance()
  const table = instance.parent as Table<T>
  const store = table.store
  const leftFixedLeafCount = computed(() => {
    return store.states.fixedLeafColumnsLength.value
  })
  const rightFixedLeafCount = computed(() => {
    return store.states.rightFixedColumns.value.length
  })
  const columnsCount = computed(() => {
    return store.states.columns.value.length
  })
  const leftFixedCount = computed(() => {
    return store.states.fixedColumns.value.length
  })
  const rightFixedCount = computed(() => {
    return store.states.rightFixedColumns.value.length
  })

  return {
    leftFixedLeafCount,
    rightFixedLeafCount,
    columnsCount,
    leftFixedCount,
    rightFixedCount,
    columns: store.states.columns,
  }
}

善于使用$attrs 组件的事件以及props透传

https://juejin.cn/post/7080875763162939429#heading-12

优雅注册全局组件技巧

https://juejin.cn/post/7080875763162939429#heading-18