每日一篇——23秋招VUE面经（4）

何小幸
77 阅读4分钟

每日一篇——23秋招VUE面经（4）

⭐React/Vue 项目中 key 的作用

在 React 和 Vue 项目中，key 属性用于标识列表中每个元素的唯一性。它在 Virtual DOM 的更新过程中扮演了重要的角色，具有以下作用：

  1. 识别组件：key 用于帮助 React 或 Vue 更准确地识别列表项或动态生成的组件，并确定何时重新渲染或更新特定的组件。通过设置唯一的 key 值，React 或 Vue 可以快速比较新旧虚拟节点的差异，从而更高效地进行更新操作。
  2. 提升性能：使用正确的 key 可以显着提升列表渲染的性能。在没有 key 的情况下，每次列表重新渲染时，整个列表的元素都会被销毁和重新创建，导致性能下降。而通过设置恰当的 key，框架可以识别哪些元素发生了变化，并且只更新变化的部分，减少不必要的操作。
  3. 维护组件状态：在列表中添加 key 后，React 和 Vue 将会确保带有相同 key 值的元素始终保持相同的身份。这意味着即使列表项的顺序发生变化，带有相同 key 的元素也不会被重新创建，而是保留其之前的状态。这对于在列表中操作表单元素或其他具有用户交互的组件时非常重要。

需要注意的是，key 属性必须是稳定且唯一的标识符，通常可以使用列表项的唯一标识符（如 id），或者使用索引作为 key（不推荐，除非列表项目没有唯一标识符）。

总结起来，key 属性在 React 和 Vue 项目中用于标识列表项的唯一性，它在虚拟 DOM 的更新过程中起到了重要的作用，可以提升性能、维护组件状态，并帮助框架准确识别和更新特定的组件。

⭐vuex面经

参考别人的博客Vuex面试题汇总 - 掘金 (juejin.cn)

⭐在vue上挂载全局属性

一般会挂载到Vue.prototype上

⭐如何定义vue插件

在 Vue.js 中，你可以通过编写插件来扩展 Vue 的功能。一个插件通常包含了一个对象或函数，其中包含了需要注册的组件、指令、过滤器、混入等。

下面是两种常见的方式来定义 Vue 插件：

1、对象形式的插件：

const myPlugin = {
  install(Vue) {
    // 在这里注册你的组件、指令、过滤器等
    Vue.component('my-component', MyComponent);
    Vue.directive('my-directive', MyDirective);
    Vue.filter('my-filter', MyFilter);
    
    // 添加全局方法或属性
    Vue.prototype.$myMethod = function() {
      // ...
    };
  }
};

// 在 Vue 实例中使用插件
Vue.use(myPlugin);

2、函数形式的插件：

const myPlugin = function(Vue) {
  // 在这里注册你的组件、指令、过滤器等
  Vue.component('my-component', MyComponent);
  Vue.directive('my-directive', MyDirective);
  Vue.filter('my-filter', MyFilter);
  
  // 添加全局方法或属性
  Vue.prototype.$myMethod = function() {
    // ...
  };
};

// 在 Vue 实例中使用插件
Vue.use(myPlugin);

无论你选择使用对象形式还是函数形式，都需要在 install 方法中完成对应组件、指令、过滤器的注册，并可以通过 Vue.prototype 添加全局方法或属性。然后使用 Vue.use() 方法来安装插件。

值得注意的是，插件必须在创建 Vue 实例之前被安装。通常，我们会在入口文件中全局注册插件。

通过编写和使用插件，我们可以很方便地扩展 Vue 的功能，并在多个组件中共享和复用这些功能。

⭐vue上的一些属性

$options 对象上存储了 Vue 实例或组件的选项信息，包括通过混入（mixin）或直接定义在组件中的选项。下面是 $options 常见的一些属性：

  1. components：定义了当前组件注册的子组件。
  2. computed：包含计算属性的定义。
  3. data：组件的数据对象，在 Vue 实例创建时会对其进行初始化。
  4. methods：包含组件中定义的方法。
  5. watch：包含监听器的定义，用于监听指定数据的变化。
  6. filters：包含过滤器的定义，用于对输出进行格式化处理。
  7. directives：指令的注册对象，用于自定义指令。
  8. mixins：数组，包含混入对象的选项。
  9. props：定义组件的属性，可以是数组形式或对象形式。
  10. el：指定 Vue 实例挂载的元素。
  11. template：组件的模板字符串或模板编译生成的渲染函数。
  12. render：渲染函数，用于自定义渲染组件的方式。

除了上述常见的属性，还可能包含其他自定义的选项，这取决于你在组件定义中添加的内容。

需要注意的是，$options 中的属性是在 Vue 实例或组件创建时解析和合并的，它们代表了最终被执行的选项。在 Vue 实例或组件的生命周期中，可以通过访问 $options 对象来查看和使用这些选项。

除了 options 属性，Vue.js 实例上还有一些其他属性。以下是一些常用的属性：

  1. $el：当前 Vue 实例关联的 DOM 元素。
  2. $data：Vue 实例的数据对象。
  3. $refs：包含了所有拥有 ref 注册的子组件以及 DOM 元素的引用。
  4. $parent：父级 Vue 实例。
  5. $root：根 Vue 实例。
  6. $children：当前 Vue 实例的直接子组件。
  7. $slots：包含了所有插槽内容的对象。
  8. $scopedSlots：包含了所有作用域插槽的对象。
  9. $attrs：包含了父级作用域中不被 prop 所识别（且获取）的特性绑定（class 和 style 除外）。
  10. $listeners：包含了父级作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

这些属性都是在 Vue 实例创建时动态添加到实例上的，可以随时读写和访问。利用这些属性，我们可以在 Vue 实例中获取它关联的 DOM 元素、数据对象、子组件等信息，并进行相应的操作。

avatar
文章
阅读
粉丝