Vue基础

Chapter 1

• 通过响应式定义的变量reactive(obj)和ref一样拥有深层响应式，所以当改变reactive(obj).obj里面的对象也会发生改变。但是reactive只能包装引用类型的变量，而ref可以包装任何类型但是在没自动解包的情况下需要.value来访问ref值

• reactive的变量如果解构的话，变量不具有响应式。(const { num } = reactive({ num: 0 }))，即使num发生变化，也无效

• 将ref赋值在reactive中，如果reactive是对象类型，那么ref将自动解包，而无需.value，并且reactive改变改值时，对应的ref也会自动更新。

  • <script setup>
    import { ref, reactive } from 'vue';
    const num = ref(0)
    
    const obj = reactive({
        num
    })
    </script>
    
    <template>
    	<button v-on:click="obj.num += 1">
            <!-- 对应的 ref: num 也会加一 -->
            {{num}}
        </button>
    </template>
    

• 将ref赋值给reactve中，但是reactive是数组类型，那么ref将不会自动解包，需要通过.value来获取，并且修改reactive的值也不会再将ref值更新

  • <script setup>
    import { ref, reactive } from 'vue''
    const num = ref(0)
    const obj = reactive([num.value])
    </script>
    
    <template>
      <button v-on:click="obj[0] += 1">
          	<!-- num 将不会更新 -->
            {{num}}
          	<!-- obj.num 将不会更新 -->
            {{obj[0]}}
        </button>
    </template>
    

• 生命周期：vue会首先执行setup进行初始化，然后初始化API，之后进行初次渲染创建DOM和插入onMounted 。渲染完成后再次期间如果状态发生变化则进入onUpdate状态，更新后会进入updated状态。当要卸载组件时会执行beforeUnmounted和unmounted

• 给DOM添加ref属性时，vue初次执行时，获取的的ref会是null，因为setup中的变量初始化是在DOM渲染插入之前的。如果想明确获取指定DOM，需要使用onMounted(() => console.log(ref.value))在挂载后在执行获取该ref

  • 也可以直接在DOM上来操作ref属性的函数,<div :ref="(e) => ref.value = e.target"></div>，当DOM移除时ref也将变为null
  • 使用watch来获取到DOM，但是watch会在DOM更新之前执行。使用需要使用watch(() => ref.value.focus(), { flush: 'post' })来指定在DOM更新之后在执行，也可以使用watchPostEffect

• 在Vue3.5之前不同的是：props解构，3.5前解构的变量不具有响应式，而3.5后解构的变量都具有响应式

• 对于变量以及属性都是相同命名时，可以像JS那样省略书写,<div :item></div>

• 通过想要过一个按钮来实现组件的切换可以使用Vue自带组件component来实现，但是切换后，之前的组件都将被卸载，也就是再次切换回来之前的ref状态会被重新初始化，可以通过Vue内置组件<KeepAlive>来实现保存不销毁

  • <script setup>
    import { ref } from 'vue'
    import Hello from './Hello.vue'
    import World from './World.vue'
    
    const key = ref('Hello')
    
    const tabs = {
      Hello,
      World
    }
    </script>
    
    <template>
      <button @click="key = 'Hello'">Hello</button>
      <button @click="key = 'World'">World</button>
      <KeepAlive :max="2">
        <component :is="tabs[key]" />
      </KeepAlive>
    </template>
    

• 在Vue中也可以给自定义组件添加v-model属性，在该组件下使用defineModel来获取

  • // 父组件
    <script setup>
    import Child from './Child.vue'
    const text = ref('')
    </script>
    
    <template>
    	<Child v-model:main.capitalize="text" />
    </template>
    
    // 子组件 Child.vue
    <script setup>
    import { defineModel } from 'vue'
        
    const [model, modifiers] = defineModel('main', {
    	get(value) {
            if (modifiers.capitalize) {
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
            return value;
        },
        set(value) {}
    })
    </script>
    
    <template>
    	<input v-model="model" />
    </template>
    

• 为Vue注入TS

  • ref和reactive可以使用ref<number>(0)/const obj: { num: number } = reactive({ num: 0 })

  • defineProps(['num'])

    • defineProps<{ num?: number }>()
    • defineProps({ num: { type: Number, required: false } })

  • defineEmits(['change'])

    • defineEmits<{ (e: 'change', id: number): void }>()
    • defineEmits({ change: (id: number) => {} })

  • provide('name', 'su')和 inject<string>('name')

  • computed<number>(() => 1)

  • <script setup>
    import Child from './Child.vue'
    
    // InstanceType 为内部自带无需引入
    type ChildType = InstanceType<typeof Child>
    </script>
    

  • useTemplateRef<HTMLDivElement>('div')

• v-if和v-show区别

  • 相同点：都是通过布尔值来显示DOM
  • 不同点：
    1. 无论布尔值是真或者假，v-show都会初始创建DOM，而v-if如果初始值为false,则初始不渲染该DOM
    2. v-show不能运用在template上和自定义组件上，而v-if都可以
    3. v-show适用于频繁切换的DOM，初始化成本比较高。v-if使用于不经常切换的DOM，初始化成本比较低
    4. v-show的隐藏类似于CSS的display: none;，而v-if则是将整个DOM销毁，所以频繁切换时使用v-if开销会比较大