84. 面试官：iframe是什么？有哪些优缺点，跟现在的微前端框架有什么区别？

83期问题及答案

1. vue中data为什么是一个函数，为什么不能直接写对象

在 Vue.js 中，为什么 data 选项应该是一个函数而不是直接写对象，涉及到 Vue.js 的实例化和组件化的设计。

1. 数据的隔离：

   Vue.js 中的组件可以被复用多次。如果 data 是一个对象，而不是一个函数，那么组件之间的数据会被共享，这可能会导致不可预测的行为。因为对象在 JavaScript 中是引用类型，多个组件共享同一个对象会导致它们共享相同的状态，这通常不是我们想要的。

   通过使用一个函数返回 data，每次创建一个新的 Vue 实例或组件时，都会调用这个函数，返回一个新的数据对象，从而保证了数据的隔离，每个组件都有自己独立的状态。

2. 避免数据共享问题：

   如果 data 是一个对象，那么所有的实例都将共享同一个对象，这可能会导致一个实例的状态变化影响到其他实例。这在多个组件实例中非常危险，容易导致 bug 和难以调试的问题。

   使用函数返回 data 可以确保每个组件实例都有自己独立的数据副本，避免了数据共享问题。

示例：

// 错误的写法，data 是对象，会导致状态共享问题
Vue.component('my-component', {
  data: {
    count: 0,
  },
});

// 正确的写法，data 是一个函数，确保每个实例都有独立的数据
Vue.component('my-component', {
  data() {
    return {
      count: 0,
    };
  },
});

总结：为了确保每个 Vue 实例或组件都具有独立的数据状态，data 选项应该是一个返回数据对象的函数。这是 Vue.js 设计的一部分，以确保组件的可复用性和数据隔离。

2. 什么是伪类，什么是伪元素，举例说明

在 CSS 中，伪类（pseudo-class）和伪元素（pseudo-element）是用来选择 HTML 元素的特殊选择器，它们允许你选择文档中的特定部分或状态，而不是直接选择元素本身。

伪类（pseudo-class）：

伪类用于选择元素的特定状态或行为，例如鼠标悬停、链接状态等。它们以冒号（:）开头，后跟状态或行为的名称。

示例：

• :hover 伪类用于选择鼠标悬停在元素上的状态：

  a:hover {
    color: red;
  }

• :nth-child 伪类用于选择父元素下的特定子元素：

  li:nth-child(odd) {
    background-color: lightgray;
  }

伪元素（pseudo-element）：

伪元素用于选择元素的特定部分，例如元素的第一个字母、第一行文本等。它们以双冒号（::）开头，后跟要选择的部分的名称。

示例：

• ::first-line 伪元素用于选择元素的第一行文本：

  p::first-line {
    font-weight: bold;
  }

• ::before 伪元素用于在元素内容之前插入内容：

  p::before {
    content: "Before this text: ";
    font-style: italic;
  }

总结：

• 伪类用于选择元素的特定状态或行为。

• 伪元素用于选择元素的特定部分。

• 伪类以单冒号（:）开头，伪元素以双冒号（::）开头。

• CSS 中有许多伪类和伪元素可供选择，它们允许你以更精细的方式选择和样式化文档中的元素。

3. vue中mixin和extend有什么区别

mixin 和 extend 都是 Vue.js 中用于创建可复用组件的机制，但它们有不同的用途和特点。

Mixin（混入）：

• mixin 允许你定义一组选项，然后将它们混合到多个组件中。

• mixin 主要用于在不同组件之间共享逻辑和选项，以减少重复代码。

• 通过混入，你可以将数据、方法、生命周期钩子等合并到组件中，它们将与组件自身的选项合并。

示例：

const myMixin = {
  data() {
    return {
      message: 'Hello from mixin',
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    },
  },
};

const ComponentA = Vue.extend({
  mixins: [myMixin],
});

const ComponentB = Vue.extend({
  mixins: [myMixin],
});

const vmA = new ComponentA();
const vmB = new ComponentB();

vmA.greet(); // 输出：Hello from mixin
vmB.greet(); // 输出：Hello from mixin

Extend（扩展）：

• extend 允许你创建一个新的 Vue 组件构造函数，基于现有组件扩展它。

• extend 主要用于创建自定义组件，通常用于创建一个特定类型的组件，而不是共享逻辑。

• 通过 extend，你可以继承现有组件的选项，并添加或覆盖它们。

示例：

const BaseComponent = Vue.extend({
  data() {
    return {
      message: 'Hello from base component',
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    },
  },
});

const CustomComponent = BaseComponent.extend({
  created() {
    console.log('Custom component created');
  },
});

const vm = new CustomComponent();
vm.greet(); // 输出：Hello from base component

总结：

• mixin 用于共享逻辑和选项，将选项混合到多个组件中，主要用于减少重复代码。

• extend 用于创建自定义组件，基于现有组件构造新的组件构造函数，主要用于创建特定类型的组件。

• 选择使用 mixin 还是 extend 取决于你的需求。如果需要共享逻辑和选项，使用 mixin；如果需要创建自定义组件，使用 extend。

84期

1. iframe是什么？有哪些优缺点，跟现在的微前端框架有什么区别？

2. HTML中的块级元素和行内元素有什么区别？

3.如何避免或优化前端代码中的内存泄漏问题？

上面问题的答案会在第二天的公众号推文中公布，如果觉得这篇文章对你有帮助，希望多多点赞收藏加关注，也希望分享给更多爱学习的小伙伴，你的肯定是我最大的动力。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题（死磕自己，愉悦大家） 希望大家在这浮夸的程序员圈里保持冷静，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。