小凯同学 xkfe: "你知道哪些vue3新特性？ :::commend{title="answer"} 参考回复：

xFeedBeta

@xkfe

小凯同学 xkfe·5 months ago

你知道哪些vue3新特性？

:::commend{title="answer"}
参考回复：

核心包比 Vue 2 更小，更好的 tree-shaking 支持，全面支持 TypeScript
setup 函数：在组件生命周期初始化时运行，用于定义响应式状态、计算属性和方法。
基于 Proxy 的新响应式系统，可以代理整个对象而不是已有属性；更好的支持数组和其他复杂数据类型；可以避免大量递归操作，性能更高
更好的 Hooks 逻辑复用
:::

Vue 组件间通信方式有哪些？

:::commend{title="answer"}
参考回复：

父子组件通信 ( props、emits )
跨层级通信祖先组件和后代组件通信 ( provide 和 inject )
灵活通信 ( Mitt 事件总线、Pinia状态管理库 )
:::

Vue3如何获取组件实例? 如何自定义模板引用名称？

:::commend{title="answer"}
参考回复：

通过 ref 获取组件实例
使用 useTemplateRefs 自定义名称
:::

Vue3 中 ref 和 reactive 区别是什么？

:::commend{title="answer"}
参考回复：

ref 更全面，不仅可用于基本数据类型还可用于引用数据类型。使用时需要通过 .value 访问
reactive 用于定义复杂的响应式对象（通常是对象或数组）。默认对对象的所有属性进行深度响应式处理。

建议使用 ref() 作为声明响应式状态的主要 API
:::

Vue3 如何解构响应式对象后不丢失响应式？

:::commend{title="answer"}
参考回复：

可以使用 Vue 3 提供的一个工具函数：toRefs

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});
const { count, message } = toRefs(state);

:::

如何处理 Vue3 项目中的跨域问题？

:::commend{title="answer"}
参考回复：

后端开启 CORS 允许跨域
使用 vite.config.js 配置代理；最常用

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
}

:::

vue3 如何实现动态组件？

:::commend{title="answer"}
参考回复：

内置特殊元素 “元组件” <component>

<template>
  <component :is="view" />
</template>

:::

vue3 中有哪些事件修饰符？

:::commend{title="answer"}
参考回复：

修饰符	作用
stop	调用 event.stopPropagation()，阻止事件冒泡
prevent	调用 event.preventDefault()，阻止默认事件行为（如表单提交）。
capture	使事件在捕获阶段触发，而不是冒泡阶段
self	仅当事件源为当前元素时触发事件，不会触发子元素的事件
...
:::

Vue3 顶层 setup下如何定义组件名称？

:::commend{title="answer"}
参考回复：

3.3+ 中支持的 defineOptions()
使用插件 unplugin-vue-setup-extend-plus

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

<script lang="ts" setup name="App" inheritAttrs="false">
  const a = 1
</script>

:::

Vue3 顶层 setup下如何获取子组件的变量或方法？

:::commend{title="answer"}
参考回复：

首先定义 ref 获取组件使用

然后在子组件使用 defineExpose() 暴露
:::

什么是作用域插槽?

:::commend{title="answer"}
参考回复：

允许子组件将数据或方法暴露给父组件，并在父组件中动态生成内容

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

:::

如何实现组件间过渡动画？

:::commend{title="answer"}
参考回复：

可以通过 <Transition> 和 <TransitionGroup> 组件来实现组件间的过渡动画。
:::

vue3 style scoped 如何"深度"选择？

:::commend{title="answer"}
参考回复：

使用 :deep()
:::

Vue3中如何实现一次性侦听和深层侦听？

:::commend{title="answer"}
参考回复：

通过配置

watch(
  source,
  (newValue, oldValue) => {
    // 当 `source` 变化时，仅触发一次
  },
  { once: true, immediate: true }
)

:::

keep-alive 的具体用途及实现原理？

:::commend{title="answer"}
参考回复：

主要用于缓存组件的状态和避免组件被频繁销毁与重建，以优化性能。

大概原理:

keep-alive 会在内部维护一个缓存对象（cache），通过组件的 name 或 key 作为标识。
当组件被切换为不活动状态时，其实例会存入 cache，而不是销毁。

:::

如何实现一个自定义指令？

:::commend{title="answer"}
参考回复：

通过 directives 选项注册

app.directive('focus', {
  mounted(el) {
    el.focus(); // 自动聚焦
  },
});```
:::

## Vue3 中的 Teleport 是什么？如何使用？
:::commend{title="answer"}
参考回复：
- Teleport 允许你将组件的 DOM 渲染到组件树之外的任意位置。它解决了 Vue 组件的 DOM 层级嵌套限制问题，使得你可以将模态框、通知、工具提示等内容渲染到 HTML 文档的任意位置。

```vue
<template>
  <div>
    <h1>主内容</h1>
    <teleport to="body">
      <div class="modal">这是一个模态框</div>
    </teleport>
  </div>
</template>

:::

Vue3 中 Suspense 是什么？

:::commend{title="answer"}
参考回复：

用于处理异步组件的加载过程。它允许你在异步任务（如数据加载或异步组件的解析）完成之前，显示一个占位内容（fallback），从而提升用户体验。

<template>
  <div>
    <h1>Suspense 示例</h1>
    <Suspense>
      <!-- 默认插槽：加载完成后显示的内容 -->
      <template #default>
        <AsyncComponent />
      </template>

      <!-- 占位插槽：加载期间显示的内容 -->
      <template #fallback>
        <p>加载中...</p>
      </template>
    </Suspense>
  </div>
</template>

:::

Pinia与 Vuex 有哪些不同？

:::commend{title="answer"}
参考回复：
Pinia相比 Vuex

更符合 Composition API 思维模式
更好的 TypeScript 类型支持
:::

vue-router 中 params 和 query 的区别？

:::commend{title="answer"}
参考回复：

:::

如何实现路由懒加载？

:::commend{title="answer"}
参考回复：

路由懒加载是一种按需加载路由对应组件的方式，可以显著优化首屏加载时间，提高应用性能。它是通过动态导入（import()）的方式实现的。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // 动态导入 Home 组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'), // 动态导入 About 组件
  },
];

:::