Vue 3 深入学习笔记

1. Composition API 深入

1.1 setup 函数

• 特点: 是 Composition API 的核心，所有的逻辑都在这里定义。

• 示例:

  <template>
    <div>{{ message }}</div>
  </template>
  
  <script>
  export default {
    setup() {
      const message = 'Hello, Vue 3!';
      return { message };
    }
  };
  </script>

  1.2 响应式 API

• ref 和 reactive:

• ref 用于基本数据类型。

• reactive 用于对象。

• 示例:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
};
</script>

1.3 组合函数

• 特点: 将逻辑封装到可复用的函数中。

• 示例:

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    return useCounter();
  }
};
</script>

2. 高级特性

2.1 Teleport

• 特点: 将组件的 DOM 渲染到组件树之外。

• 示例:

<template>
  <teleport to="#modal">
    <div class="modal">这是一个模态框</div>
  </teleport>
</template>

2.2 Suspense

• 特点: 处理异步组件加载。

• 示例:

<template>
  <suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
  }
};
</script>

3. 性能优化

3.1 缓存和优化

• v-memo 指令: 缓存组件的渲染结果。

• 示例:

<template>
  <div v-memo="[count]">
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return { count };
  }
};
</script>

4. TypeScript 的深度集成

4.1 使用 defineComponent

• 特点: 提供类型安全的组件定义方式。

• 示例:

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);
    return { count };
  }
});
</script>

5. 新的 API 和工具

5.1 provide 和 inject

• 特点: 用于跨组件传递数据。

• 示例:

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent!');
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return { message };
  }
};
</script>

6.1 Modal 组件

• 特点: 使用 Teleport 实现模态框。

• 示例:

<!-- Modal.vue -->
<template>
  <teleport to="body">
    <div v-if="visible" class="modal">
      <div class="modal-content">
        <slot></slot>
        <button @click="close">关闭</button>
      </div>
    </div>
  </teleport>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const visible = ref(false);

    const open = () => {
      visible.value = true;
    };

    const close = () => {
      visible.value = false;
    };

    return { visible, open, close };
  }
};
</script>

<style>

</style>

6.2 Tabs 组件

• 特点: 使用 provide 和 inject 实现选项卡。

• 示例:

<!-- Tabs.vue -->
<template>
  <div class="tabs">
    <div class="tab-buttons">
      <button
        v-for="tab in tabs"
        :key="tab"
        @click="selectTab(tab)"
        :class="{ active: tab === selectedTab }"
      >
        {{ tab }}
      </button>
    </div>
    <div class="tab-content">
      <slot :selectedTab="selectedTab"></slot>
    </div>
  </div>
</template>

<script>
import { ref, provide } from 'vue';

export default {
  setup() {
    const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
    const selectedTab = ref(tabs[0]);

    const selectTab = (tab) => {
      selectedTab.value = tab;
    };

    provide('selectedTab', selectedTab);

    return { tabs, selectedTab, selectTab };
  }
};
</script>

<style>

</style>

6.3 Dropdown 组件

• 特点: 使用 v-model 实现双向绑定。

• 示例:

<!-- Dropdown.vue -->
<template>
  <div class="dropdown">
    <button @click="toggle">{{ selected }}</button>
    <ul v-if="isOpen">
      <li v-for="option in options" :key="option" @click="select(option)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    modelValue: String,
    options: Array
  },
  setup(props, { emit }) {
    const isOpen = ref(false);
    const selected = ref(props.modelValue);

    const toggle = () => {
      isOpen.value = !isOpen.value;
    };

    const select = (option) => {
      selected.value = option;
      emit('update:modelValue', option);
      isOpen.value = false;
    };

    return { isOpen, selected, toggle, select };
  }
};
</script>

<style>

</style>