Jude's Vuepress

1、什么是vue中的slot?有什么作用？

# 1、什么是vue中的slot?有什么作用？

slot是一种用于组件模板中分发内容的机制，可以用它来将父组件的内容传递给子组件，从而实现灵活的内容分发和组件复用。

具体来说，就是slot可以帮助我们在子组件中定义占位符，这些占位符将被父组件传递的内容所替换。使得我们在开发中可以创建更具通用性和复用性的组件。

  • 默认插槽：如果子组件中只有一个插槽，会被视为默认插槽。父组件传递的元素会替换子组件模板中的默认插槽标签。

    <!-- Parent component -->
<child-component>
  <p>This is the content from the parent.</p>
</child-component>

<!-- Child component template -->
<div>
  <slot></slot>
</div>

  • 具名插槽：当需要在一个组件中使用多个插槽时，可以为每个插槽命名。父组件通过特定的模板语法传递内容到具名插槽中，子组件根据插槽名称进行渲染。

    <!-- Parent component -->
<child-component>
  <template v-slot:header>
    <h1>This is the header content.</h1>
  </template>
  <template v-slot:footer>
    <p>This is the footer content.</p>
  </template>
</child-component>

<!-- Child component template -->
<div>
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot> <!-- 默认插槽 -->
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

  • 作用域插槽：作用域插槽允许父组件使用子组件提供的数据，通常用于较复杂的场景，如表格组件传递特定行数据给父组件进行自定义渲染。父组件通过特定语法获取子组件传递的数据进行渲染。

    <!-- Parent component -->
<child-component v-slot:default="slotProps">
  <p>{{ slotProps.message }}</p>
</child-component>

<!-- Child component template -->
<div>
  <slot :message="messageFromChild"></slot>
</div>

# 2、在Vue渲染模板时，如何保留模板中的html注释？

使用指令v-html。

步骤：

1、创建组件

2、使用v-html指令，绑定一个包含HTML注释的字符串

需要注意安全问题，可能会导致xss攻击，保证插入的HTML内容是安全的

# 3、vue的v-pre和v-cloak指令有什么作用？

v--cloak 用于防止闪烁，在 Vue 应用程序完全编译前给绑定的 DOM 元素添加 display:none 样式，避免未解析模板直接显示给用户，通常和 CSS 一同使用，在应用启动阶段确保用户看不到“闪烁”内容，适用于任何 Vue 应用程序。

v--pre 用于跳过该节点及其子节点的编译过程，直接输出原始的 Mustache 标签，对提升性能有帮助，适合大型项目或需要优化性能的地方，在需要提升性能或避免干扰的场景下有用。

v-cloak 主要防止闪烁，在 Vue 应用未完全编译前隐藏 DOM 元素，保证用户体验。使用时将其绑定在元素上并通过 CSS 控制显示隐藏，编译完成后自动移除。适用于任何 Vue 应用程序的启动阶段。

v-pre 跳过节点及其子节点编译过程，输出原始 Mustache 标签，提升性能、避免干扰。适用于大型项目或需优化性能的地方。

# 4、Vue-Router中如何获取路由传递过来的参数？

在 Vue Router 中传递参数的两种方式，即动态路由匹配和查询参数，其应用场景、混合使用方法、观察参数变化的方式以及路由传参的最佳实践。

动态路由匹配：通过类似 /user/:id 的路径定义动态路由参数，可使用 this.$route.params 获取参数。通常用于资源路径，如用户页面和文章页面，使 URL 简洁明了且符合语义化。

查询参数：以 URL 中查询字符串的形式传递参数，如 /user?id=123，通过 this.$route.query 获取。适用于筛选、搜索等功能，更适合多参数组合且顺序不固定的场景。

混合使用：可以同时使用动态路由和查询参数，如 /user/123?tab=info，结合两者优点，保证路径简洁又增加参数多样性。

观察参数变化：可通过 Vue 的 $watch 或 lifecycle hook 监听路由参数变化，如在 watch 中处理 $route 的变化以应对参数变动。

路由传参最佳实践：实际开发中要保持路由参数简洁有意义，考虑数据量、SEO 需求和用户可读性等因素，合理选择动态路由或查询参数，并做好参数验证和默认值处理。

# 5、过滤器及其应用场景

过滤器在 Vue 中主要用于文本格式化，可应用于日期格式化、文本格式化和数值格式化等场景。在 Vue 3 中，官方推荐使用方法（methods）或者计算属性（computed properties）来替代过滤器。

Vue 过滤器：在 Vue 中过滤器是用于文本格式化的工具，通常用于模板表达式中，将数据进行转换、格式化，使视图更具可读性和用户友好。

应用场景列举：包括日期格式化、将后端返回的时间戳转换为用户可读的日期格式；文本格式化，如将文字转换为大写、小写或截取一定长度等；数值格式化，对货币、百分比等数值进行格式化显示。

Vue.filter('capitalize', function (value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});


<p>{{ message | capitalize }}</p>

Vue 3 中的变化：在 Vue 3 中，过滤器这一特性被移除，官方推荐使用方法（methods）或者计算属性（computed properties）来替代。

方法替代示例：通过方法可以定义更复杂的操作，有助于更好地管理逻辑和复用。Vue 3 中使用方法替代过滤器的示例代码。

export default {
  methods: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
}

<p>{{ capitalize(message) }}</p>

# 6、vue-router中如何配置404页面

配置方法：通过 Vue Router 设置 404 页面，将路由配置中的通配符“*”指向一个 404 组件

Vue Router 模式：使用了 mode: 'history'设置路由模式避免 URL 出现#符号，但使用 history 模式需在服务器端做配置使所有路径指向 index.html 文件。

懒加载路由组件：为优化性能可使用 Vue 的异步组件懒加载路由组件，仅在访问该路由时加载对应组件减少初始加载时间。

通配符路由位置：通配符路由 path: '*'一定要放在所有路由规则最后一条，否则会导致后面路由规则无法被匹配。

404 组件设计：404 页面组件可设计得更丰富，如包含返回首页按钮或友好提示信息提升用户体验。

导航守卫：Vue Router 提供导航守卫，可在路由跳转前进行鉴权或日志记录等操作，在大项目中常用。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home.vue';
import NotFound from '@/components/NotFound.vue'; // 这是你的 404 页面组件

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '*', // 通配符，一定要放在最后
    component: NotFound
  }
];

const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History 模式
  routes
});

export default router;

# 7、Vue的template标签有什么用？

在 Vue 2 和 Vue 3 中 template 主要作为占位符使用，但有一些区别。

Vue 2 中 template 的表现：在 Vue 2 中，template 作为占位符或传递插槽内容，在 compiler 后会被去除，不影响渲染到页面的 DOM。通过实际例子和分析 render 函数中的方法作用进行了说明。

Vue 3 中 template 的表现：Vue 3 中的 template 与 Vue 2 有差别，不携带特定指令时会被渲染成原生 template 标签，只有与 v-if、v-else-if、v-else、v-for、v-slot 一起使用时，里面的元素才会被 Vue 内部处理。

使用场景及好处：可以用 template 对多个同级元素进行统一显隐，提高简洁性，因为 template 不会在 DOM 上真实渲染，而换成其他元素则会在 DOM 上真实渲染。通过对比实际效果进行了说明。

# 8、Vue的data属性为啥是一个函数而不是对象？

主要原因是为了确保每个组件实例都有独立的状态，避免共享数据对象带来的意外副作用和错误。

确保独立状态：在 Vue 中，将 data 定义为函数可以在每次创建新组件实例时返回一个全新的对象，保证每个组件实例的数据独立，避免一个组件状态修改影响其他组件。

数据共享与隔离：使用对象作为 data 属性会导致所有实例共享数据，而函数返回对象可确保每个组件实例数据独立互不干扰。

组件复用：Vue 提倡组件复用和单一职责，函数返回新对象的方式确保每次使用组件都有独立数据作用域，在大型应用中尤为重要。

单例组件特殊情况：单例组件如根实例可以直接将 data 定义为对象，因为只实例化一次不存在多个实例共享数据问题，但实际开发中较少用。

性能考虑：为每个组件实例生成新数据对象虽增加内存开销，但相对于数据共享带来的错误及调试成本，这种设计权衡是值得的，且现代浏览器和 JavaScript 引擎能较好处理内存管理和对象创建，性能开销可接受。

# 9、为什么不建议在Vue中同时使用v-if和v-for?

在 Vue 中同时使用 v--if 和 v--for 会带来一些问题，包括更高的性能开销和更复杂的代码维护。

在 Vue3 版本中，v--if 优先级高于 v--for，这会导致在每个迭代中进行条件判断从而增加性能开销，并且使代码难以理解和调试，还可能出现不必要的渲染。

而在 Vue2 版本中，v--for 优先级高于 v--if。

为避免这些问题，建议将 v--if 和 v--for 分开使用，比如使用计算属性，将 v--if 条件放到计算属性中返回符合条件的数组再用 v--for；或者在外层包裹条件判断；同时要理解指令的优先级，如 Vue 中 v--for 的优先级低于 v--if，还有 v--on 的事件绑定、v--bind 的属性绑定等指令的优先级也需了解清楚。

v-if 和 v-for 同时使用的问题：在 Vue 中同时使用 v-if 和 v-for 会带来性能开销和代码维护难题。Vue3 中 v-if 优先级高，每次迭代都进行条件判断增加开销，且使代码难理解调试，可能导致不必要渲染；Vue2 中 v-for 优先级高。

优化方法一：

使用计算属性：将 v-if 条件放到计算属性中，只返回符合条件的数组，然后在模板中直接使用 v-for，避免每次迭代中的条件判断。

优化方法二：

外层包裹条件判断：在模板中先使用 v-if 判断条件，再使用 v-for 循环渲染符合条件的数据，适用于一些特定场景。

理解指令优先级：理解 Vue 指令的优先级有助于优化代码，如 v-for 优先级低于 v-if，还有 v-on、v-bind 等指令的优先级也需清楚（v-bind的优先级大于v-on）。

# 10、Vue计算属性的函数名和data中的属性可以同名吗？

Vue 计算属性的函数名和 data 中的属性不可以同名。

Vue 会将 data 中的属性和计算属性都挂载到 Vue 实例上，同名会发生命名冲突，导致实例中的属性被覆盖，引发不可预知的错误。

扩展知识包括命名冲突的本质是 data 和计算属性最终都作为 Vue 实例的属性存在，后挂载的会覆盖先挂载的同名属性；计算属性的优先级低于 data；避免命名冲突的最佳实践有命名规范、模块化管理和严格代码审查；Vue 会在控制台输出警告信息提醒命名冲突；methods 中的方法也会被挂载到 Vue 实例上需避免同名，而 watchers 不参与命名冲突。

命名冲突原因：Vue 将 data 中的属性和计算属性都挂载到 Vue 实例上，同名会产生冲突，实例中的属性可能被覆盖从而引发错误。

命名冲突本质：data 和计算属性最终都作为 Vue 实例的一个属性存在，初始化时按一定顺序挂载，后挂载的同名属性会覆盖先挂载的。 计算属性优先级：data 的优先级高于计算属性，模板中优先使用 data 中的数据，因为 data 直接存储数据，计算属性基于 data 或其他属性变化计算。

避免命名冲突实践：命名规范确保不同名，模块化管理提高代码可读性和可维护性，严格代码审查及时纠正潜在问题。

命名冲突提醒方式：Vue 在控制台输出警告信息提醒开发者存在属性命名冲突，帮助快速定位和修复问题。

Vue 其他相关特性：methods 中的方法也会被挂载到 Vue 实例上需避免与 data 和计算属性同名，watchers 不参与命名冲突。

Q&A vue2