vue3使用总结

基础知识

• ref全家桶

    // ref
    // isRef: 判断是不是一个ref对象
    // shallowRef: 跟踪自身 .value 变化的 ref,其属性是非响应式
    // triggerRef: 强制更新页面DOM
    // customRef: 是个工厂函数要求我们返回一个对象 并且实现 get 和 set  适合去做防抖之类的
  
    function myRef<T = any>(value: T) {
      let timer:any;
      return customRef((track, trigger) => {
        return {
          get() {
            track()
            return value
          },
          set(newVal) {
            clearTimeout(timer)
            timer =  setTimeout(() => {
              console.log('触发了set')
              value = newVal
              trigger()
            },500)
          }
        }
      })
    }
    
    
    const name = myRef<string>('小满')
    
    
    const change = () => {
      name.value = '大满'
    }
  
  

• reactive全家桶

    // reactive: 用于引用类型数据的响应式，不要直接赋值，如果有，使用ref代替
    // readonly
    const copy = readonly(person)
    // shallowReactive：只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图
  

• ref和reactive

    const a = ref(1)
    console.log(a.value) // 1
    
    // reactive更方便用于对象或者数组，如果需要对obj变量重新赋值则采用ref
    const obj = reactive({ a: 1})
    console.log(obj.a) // 1

• 通过unref对ref解构方便传参数，或者通过…refData.value结构
• watch和watchEffect
• defineProps，defineEmit，defineExpose

    // 定义props，但读取时需要通过props去读取，template部分不用通过props读取
    const props = defineProps({
        disabled: {
            type: Boolean,
            default: false
        }
    })
    console.log(props.disabled)

    // 定义自定义事件并执行
    const emit = defineEmits(['update:downData'])
    emit('update:downData', true)

    // 将属性或方法挂载到实例上
    defineExpose({
        submitForm
    })

• 声明文件shims-vue.d.ts

场景应用

• Hooks
  • hooks本质是函数，在setup函数中执行
  • 可以将单独功能逻辑提取到一个hooks中
  • hooks中可以执行生命周期（与setup中的执行顺序？）
• 父子组件通信
  • ref
  • v-model
  • pinia
• 使用watchEffect代替watch监听路由变化（适用查看/修改/新增通用页面场景）

    <script setup>
        import { ref, watchEffect } from 'vue'
        import { useRouter } from 'vue-router'
        const getRouterInit = () => {
                const { query, params } = router.currentRoute.value || {}
                // view add edit
                const type = (query?.type as string) || 'add'
                const id = params?.id as string
                titleMsg.value = TYPE_TITLE[type]
            // dosomething
        }
        // 页面初始化和手动路由变化都会触发getRouterInit函数，因为watchEffect依赖了query, params
        watchEffect(getRouterInit)
        
    </script>
  

• css中使用变量

    <script setup>
        import { ref, onMounted } from 'vue'
    
        // 初始宽高
        const boxWidth = ref('100px')
        const boxHeight = ref('100px')
    
        // 动态设置宽高
        onMounted(() => {
            boxWidth.value = `${100 * 2}px`
            boxHeight.value = `${100 * 2}px`
        })
    </script>
    <style lang="less" scoped>
        .box {
            width: v-bind('boxWidth');
            height: v-bind('boxHeight');
        }
    </style>
    
  

• 使用defineAsyncComponent异步引入组件

  import { defineAsyncComponent } from 'vue';
  // 引入组件
  const Tool = defineAsyncComponent(() => import('./component/tool/index.vue'));
  

• vue-router使用

    import { useRouter } from 'vue-router';
    // 定义变量内容
    const router = useRouter();
    // 返回首页
    const onGoHome = () => {
      router.push('/');
    };
  

vue3中使用ts