前端核心知识：Vue 3 编程的 10 个实用本领

  

1. 使用 ref 和 reactive 管理响应式数据

原理剖析

Vue 3 引入了 ref 和 reactive 两个核心 API 来管理响应式数据：

• ref：用于创建根本类型（如字符串、数字）的响应式数据，返回一个包含 value 属性的对象。
  
• reactive：用于创建复杂对象或数组的响应式数据，返回一个代理对象。
  

代码示例

1. import { ref, reactive } from 'vue';
3. // 使用 ref 管理基本类型数据
4. const count = ref(0);
5. console.log(count.value); // 0
7. // 使用 reactive 管理复杂对象
8. const state = reactive({
9.   name: 'Vue 3',
10.   version: '3.2.0',
11. });
12. console.log(state.name); // Vue 3

复制代码

注意事项

• 使用 ref 时，必要通过 .value 访问或修改数据。
  
• reactive 只能用于对象或数组，不能用于根本类型。
  

---

2. 组合式 API（Composition API）

原理剖析

组合式 API 是 Vue 3 的核心特性之一，它允许开辟者将逻辑代码构造成可复用的函数，而不是依赖于选项式 API（如 data、methods 等）。通过 setup 函数，开辟者可以更机动地管理组件的状态和逻辑。
代码示例

1. import { ref, computed } from 'vue';
3. export default {
4.   setup() {
5.     const count = ref(0);
7.     const doubleCount = computed(() => count.value * 2);
9.     function increment() {
10.       count.value++;
11.     }
13.     return {
14.       count,
15.       doubleCount,
16.       increment,
17.     };
18.   },
19. };

复制代码

优势

• 逻辑复用性更强。
  
• 代码构造更清晰，尤其是复杂组件。
  

---

3. 使用 watch 和 watchEffect 监听数据变化

原理剖析

• watch：用于监听特定响应式数据的变化，支持深度监听和懒实行。
  
• watchEffect：自动追踪其依赖的响应式数据，并在依赖变化时立即实行。
  

代码示例

1. import { ref, watch, watchEffect } from 'vue';
3. const count = ref(0);
5. // 使用 watch 监听 count 的变化
6. watch(count, (newValue, oldValue) => {
7.   console.log(`count changed from ${oldValue} to ${newValue}`);
8. });
10. // 使用 watchEffect 自动追踪依赖
11. watchEffect(() => {
12.   console.log(`count is now ${count.value}`);
13. });

复制代码

注意事项

• watch 更得当精确控制监听逻辑。
  
• watchEffect 得当不必要明白指定依赖的场景。
  

---

4. 使用 provide 和 inject 实现跨组件通讯

原理剖析

provide 和 inject 是 Vue 3 中实现跨组件通讯的 API，特别得当在深层嵌套组件中转达数据。
代码示例

1. // 父组件
2. import { provide, ref } from 'vue';
4. export default {
5.   setup() {
6.     const message = ref('Hello from parent');
7.     provide('message', message);
8.   },
9. };
11. // 子组件
12. import { inject } from 'vue';
14. export default {
15.   setup() {
16.     const message = inject('message');
17.     return { message };
18.   },
19. };

复制代码

优势

• 避免逐层转达 props 的繁琐。
  
• 得当全局状态管理（如主题、用户信息等）。
  

---

5. 使用 Teleport 实现组件挂载到恣意位置

原理剖析

Teleport 是 Vue 3 新增的特性，允许将组件的内容渲染到 DOM 中的恣意位置，常用于模态框、关照等场景。
代码示例

1. <template>
2.   <button @click="showModal = true">Open Modal</button>
3.   <Teleport to="body">
4.     <div v-if="showModal" class="modal">
5.       <p>This is a modal!</p>
6.       <button @click="showModal = false">Close</button>
7.     </div>
8.   </Teleport>
9. </template>
11. <script>
12. import { ref } from 'vue';
14. export default {
15.   setup() {
16.     const showModal = ref(false);
17.     return { showModal };
18.   },
19. };
20. </script>

复制代码

优势

• 办理组件层级和样式隔离问题。
  
• 提升用户体验。
  

---

6. 使用 Suspense 处理异步组件加载

原理剖析

Suspense 是 Vue 3 中用于处理异步组件加载的特性，可以在组件加载完成前显示占位内容。
代码示例

1. <template>
2.   <Suspense>
3.     <template #default>
4.       <AsyncComponent />
5.     </template>
6.     <template #fallback>
7.       <div>Loading...</div>
8.     </template>
9.   </Suspense>
10. </template>
12. <script>
13. import { defineAsyncComponent } from 'vue';
15. const AsyncComponent = defineAsyncComponent(() =>
16.   import('./AsyncComponent.vue')
17. );
19. export default {
20.   components: {
21.     AsyncComponent,
22.   },
23. };
24. </script>

复制代码

优势

• 提升用户体验，避免页面空缺。
  
• 简化异步组件加载逻辑。
  

---

7. 使用 v-model 实现双向绑定

原理剖析

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定，并可以通过 modelValue 和 update:modelValue 自界说绑定逻辑。
代码示例

1. <template>
2.   <CustomInput v-model:firstName="firstName" v-model:lastName="lastName" />
3. </template>
5. <script>
6. import { ref } from 'vue';
8. export default {
9.   setup() {
10.     const firstName = ref('John');
11.     const lastName = ref('Doe');
12.     return { firstName, lastName };
13.   },
14. };
15. </script>

复制代码

自界说组件 CustomInput

1. <template>
2.   <input :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
3.   <input :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
4. </template>
6. <script>
7. export default {
8.   props: ['firstName', 'lastName'],
9. };
10. </script>

复制代码

优势

• 支持多个 v-model 绑定。
  
• 更机动的双向绑定实现。
  

---

8. 使用 defineComponent 加强 TypeScript 支持

原理剖析

defineComponent 是 Vue 3 中用于加强 TypeScript 支持的 API，可以提供更好的类型推断和代码提示。
代码示例

1. import { defineComponent, ref } from 'vue';
3. export default defineComponent({
4.   setup() {
5.     const count = ref(0);
6.     return { count };
7.   },
8. });

复制代码

优势

• 提升 TypeScript 开辟体验。
  
• 更好的类型安全和代码提示。
  

---

9. 使用 Fragment 减少不必要的 DOM 元素

原理剖析

Vue 3 支持多根节点组件（Fragment），可以减少不必要的 DOM 元素，提升渲染性能。
代码示例

1. <template>
2.   <header>Header</header>
3.   <main>Main Content</main>
4.   <footer>Footer</footer>
5. </template>

复制代码

优势

• 减少不必要的 DOM 层级。
  
• 提升渲染性能。
  

---

10. 使用 Custom Directives 自界说指令

原理剖析

Vue 3 允许开辟者自界说指令，用于直接操作 DOM 元素。
代码示例

1. import { directive } from 'vue';
3. const vFocus = {
4.   mounted(el) {
5.     el.focus();
6.   },
7. };
9. export default {
10.   directives: {
11.     focus: vFocus,
12.   },
13. };

复制代码

使用示例

1. <input v-focus />

复制代码

优势

• 提供更机动的 DOM 操作能力。
  
• 得当实现特定功能（如自动聚焦、拖拽等）。
  

---

总结

本文详细介绍了 Vue 3 编程中的 10 个实用本领，涵盖了响应式数据管理、组合式 API、跨组件通讯、异步组件加载等多个方面。通过掌握这些本领，开辟者可以更高效地构建现代化的 Vue 应用，提升代码质量和开辟体验。希望本文能为您的 Vue 3 开辟之旅提供资助！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。