Vue 3 开发必备：10个提升效率的实用技巧

vue 3 带来了很多新特性和改进，让开发变得更加高效。无论是新手还是有经验的开发者，掌握这些技巧都能让你的代码更简洁、性能更好。

1. 正确使用 ref 和 reactive 管理数据

Vue 3 提供了两种创建响应式数据的方法：

ref - 适合基本类型数据（字符串、数字等）

import { ref } from 'vue';

const count = ref(0);
const name = ref('张三');

// 使用时需要.value
console.log(count.value); // 0
count.value = 1;

reactive - 适合对象和数组

import { reactive } from 'vue';

const user = reactive({
  name: '李四',
  age: 25,
  hobbies: ['读书', '运动']
});

// 直接使用，不需要.value
console.log(user.name); // 李四
user.age = 26;

使用建议：

简单数据用 ref
复杂对象用 reactive
在模板中，ref 会自动解包，不需要写 .value

2. 组合式 api 让代码更清晰

组合式 API 可以把相关逻辑组织在一起，让代码更容易维护：

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // 数据
    const count = ref(0);
    const todos = ref([]);
    
    // 计算属性
    const unfinishedTodos = computed(() => {
      return todos.value.filter(todo => !todo.done);
    });
    
    // 方法
    function addTodo(text) {
      todos.value.push({ text, done: false });
    }
    
    // 生命周期
    onMounted(() => {
      console.log('组件加载完成');
    });
    
    return {
      count,
      todos,
      unfinishedTodos,
      addTodo
    };
  }
};

好处：

相关功能代码在一起，容易查找
逻辑可以复用
类型推导更好

3. 监听数据变化的两种方式

watch - 精确监听特定数据

import { ref, watch } from 'vue';

const count = ref(0);
const user = reactive({ name: '王五', age: 30 });

// 监听单个数据
watch(count, (newValue, oldValue) => {
  console.log(`计数从 ${oldValue} 变为 ${newValue}`);
});

// 监听对象属性
watch(() => user.name, (newName, oldName) => {
  console.log(`名字从 ${oldName} 改为 ${newName}`);
});

watchEffect - 自动追踪依赖

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  // 自动追踪 count.value
  console.log(`当前计数：${count.value}`);
  document.title = `计数：${count.value}`;
});

选择建议：

需要知道变化前后值用 watch
只是响应变化用 watchEffect

4. 跨组件传递数据

深层嵌套组件传递数据，不需要一层层传 props：

父组件提供数据：

import { provide, ref } from 'vue';

export default {
  setup() {
    const user = ref({ name: '赵六', role: 'admin' });
    
    // 提供数据
    provide('user', user);
    provide('theme', 'dark');
  }
};

子组件接收数据：

import { inject } from 'vue';

export default {
  setup() {
    // 注入数据
    const user = inject('user');
    const theme = inject('theme', 'light'); // 默认值
    
    return { user, theme };
  }
};

5. 把组件渲染到任意位置

Teleport 可以把组件渲染到 dom 的其他位置，适合弹窗、通知等：

<template>
  <button @click="show = true">打开弹窗</button>
  
  <Teleport to="body">
    <div v-if="show" class="modal">
      <h3>这是一个弹窗</h3>
      <p>内容显示在 body 末尾</p>
      <button @click="show = false">关闭</button>
    </div>
  </Teleport>
</template>

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

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

6. 优雅处理异步组件

Suspense 让异步组件加载有更好的用户体验：

<template>
  <Suspense>
    <!-- 主要内容 -->
    <template #default>
      <AsyncUserProfile />
    </template>
    
    <!-- 加载中的显示 -->
    <template #fallback>
      <div class="loading">加载中...</div>
    </template>
  </Suspense>
</template>

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

// 异步组件
const AsyncUserProfile = defineAsyncComponent(() => 
  import('./UserProfile.vue')
);

export default {
  components: {
    AsyncUserProfile
  }
};
</script>

7. 多个 v-model 绑定

Vue 3 支持多个 v-model，让表单处理更方便：

<template>
  <!-- 多个 v-model -->
  <UserForm
    v-model:name="userName"
    v-model:age="userAge"
    v-model:email="userEmail"
  />
</template>

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

export default {
  setup() {
    const userName = ref('');
    const userAge = ref('');
    const userEmail = ref('');
    
    return { userName, userAge, userEmail };
  }
};
</script>

子组件 UserForm.vue：

<template>
  <input 
    :value="name" 
    @input="$emit('update:name', $event.target.value)"
    placeholder="姓名"
  >
  <input 
    :value="age" 
    @input="$emit('update:age', $event.target.value)"
    placeholder="年龄"
  >
  <input 
    :value="email" 
    @input="$emit('update:email', $event.target.value)"
    placeholder="邮箱"
  >
</template>

<script>
export default {
  props: ['name', 'age', 'email'],
  emits: ['update:name', 'update:age', 'update:email']
};
</script>

8. 更好的 TypeScript 支持

使用 defineComponent 获得更好的类型提示：

import { defineComponent, ref } from 'vue';

interface User {
  name: string;
  age: number;
}

export default defineComponent({
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  
  setup(props) {
    const user = ref<User | null>(null);
    const loading = ref(false);
    
    // 现在有完整的类型提示
    async function fetchUser() {
      loading.value = true;
      // 获取用户数据
      loading.value = false;
    }
    
    return {
      user,
      loading,
      fetchUser
    };
  }
});

9. 多根节点组件

Vue 3 组件可以有多个根节点，减少不必要的 div：

<template>
  <header>页面头部</header>
  <main>主要内容</main>
  <footer>页面底部</footer>
</template>

<script>
export default {
  // 不需要外层 div
};
</script>

10. 自定义指令

创建自己的指令来处理 DOM 操作：

// 自动聚焦指令
const vFocus = {
  mounted(el) {
    el.focus();
  },
  
  updated(el, binding) {
    if (binding.value) {
      el.focus();
    }
  }
};

export default {
  directives: {
    focus: vFocus
  }
};

使用指令：

<template>
  <input v-focus placeholder="自动获得焦点">
  <input v-focus="shouldFocus" placeholder="条件聚焦">
</template>

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

实用建议

性能优化：

使用 shallowRef 和 shallowReactive 避免不必要的深度响应
合理使用 computed 缓存计算结果
在列表渲染中使用 key

代码组织：

使用组合式函数复用逻辑
按功能组织代码，而不是按选项
使用 setup 语法糖简化代码

开发体验：

使用 Vue Devtools 调试
配置 ESLint 和 Prettier
编写单元测试

掌握这些 Vue 3 技巧后，你会发现开发效率明显提升。建议在实际项目中逐步尝试这些特性，根据具体需求选择合适的方法。

记住，好的工具要用在合适的地方。不要为了用新特性而用新特性，选择最能解决实际问题的方法才是最重要的。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13125