130期
1. vue生命周期是咋样的？父子组件直接触发的生命周期钩子顺序是咋样的
2. 将图片进行base64编码后，为什么是会让图片变大？
3. 说说webpack proxy工作原理，为什么能解决跨域问题？
上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布
也可以小程序刷题，已收录500+面试题及答案
129期问题及答案
1. 如何给一个vue组件写测试用例，请给出具体示例
在 Vue.js 中，你可以使用测试框架如 Jest 或 Mocha 来编写测试用例。Vue Test Utils 是一个专门为 Vue.js 设计的测试工具库，它可以帮助你方便地测试 Vue 组件。以下是一个简单的示例，演示如何使用 Jest 和 Vue Test Utils 编写一个测试用例。
首先，确保你的项目中已经安装了 Jest、Vue Test Utils 以及相关的依赖：
npm install --save-dev jest @vue/test-utils vue-jest然后，在项目的根目录下创建一个 __tests__ 文件夹，用于存放测试文件。在该文件夹下创建一个测试文件，比如 MyComponent.spec.js：
// MyComponent.spec.jsimport { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';describe('MyComponent', () => {it('renders correctly with props', () => {// 准备测试数据const propsData = {message: 'Hello, Vue!'};// 渲染组件const wrapper = mount(MyComponent, {propsData});// 断言组件的渲染结果expect(wrapper.text()).toContain(propsData.message);expect(wrapper.find('div').exists()).toBe(true);// 你还可以进行更多的断言，测试组件的交互等});it('emits an event when button is clicked', async () => {const wrapper = mount(MyComponent);// 触发点击事件await wrapper.find('button').trigger('click');// 断言事件已被触发expect(wrapper.emitted().buttonClick).toBeTruthy();});
});在这个示例中，我们首先导入 mount 函数和我们要测试的组件 MyComponent。然后，在测试用例中，我们使用 mount 渲染了组件，提供了一些测试数据（props），并进行了一些断言，检查组件是否按预期渲染和行为是否符合预期。
确保你的 Vue 组件是按照单一职责原则设计的，这样你就可以更容易地进行测试。在测试中，尽量关注组件的输入输出和交互，确保组件在各种情况下都能正确工作。
最后，你可以在项目的 package.json 中配置 Jest 的一些设置，比如配置 Jest 执行的文件匹配模式、测试覆盖率等。
这只是一个简单的示例，实际上，测试的深度和广度可能会因项目的复杂性而有所不同。
2. 如何在箭头函数中获取全部的参数？
在箭头函数中，如果你想获取全部的参数，你可以使用剩余参数（rest parameters）语法。剩余参数允许你将函数的所有参数收集到一个数组中。
下面是一个简单的示例：
const myArrowFunction = (...args) => {console.log(args);
};myArrowFunction(1, 'hello', true);在这个例子中，箭头函数 myArrowFunction 使用了剩余参数 ...args，这样它可以接受任意数量的参数，并将它们放入一个名为 args 的数组中。当你调用 myArrowFunction(1, 'hello', true) 时，args 将变成一个包含所有参数的数组 [1, 'hello', true]。
需要注意的是，剩余参数只能出现在函数的最后一个参数位置，因为它负责收集函数的剩余参数。如果你在参数列表中的其他位置使用了剩余参数，会导致语法错误。
// 错误的使用方式
const invalidArrowFunction = (arg1, ...rest, arg2) => {// SyntaxError: Rest parameter must be last formal parameter
};因此，确保将剩余参数放在参数列表的最后，以正确获取所有的参数。
3. 箭头函数为什么不能当做构造函数？
箭头函数不能用作构造函数的主要原因是它们没有自己的 this 绑定。在箭头函数中，this 的值是在创建函数时继承自包含它的作用域。而对于构造函数而言，它需要一个新的实例对象，而这个实例对象的 this 需要指向新创建的对象。
下面是一些导致箭头函数不能用作构造函数的关键特性：
没有自己的
this： 箭头函数的this值是在定义时确定的，而不是在运行时。它继承自外围（定义箭头函数的地方）的作用域。这导致在箭头函数中无法使用new关键字创建一个新的实例对象，并且无法在构造函数中初始化实例的属性。不能通过
new调用： 当你尝试通过new关键字调用一个箭头函数时，JavaScript 引擎会抛出一个错误，因为箭头函数没有构造函数的特性。
下面是一个简单的例子说明箭头函数不能用作构造函数：
const MyArrowFunction = () => {this.value = 42; // 错误：this 在箭头函数中是 undefined
};// 尝试用 new 关键字调用箭头函数
const instance = new MyArrowFunction(); // TypeError: MyArrowFunction is not a constructor相比之下，普通函数可以用作构造函数，因为它们有自己的 this 绑定，而且在调用时会创建一个新的实例对象。箭头函数更适用于那些不需要绑定自己 this 值的场景，例如在回调函数或者简单的函数表达式中。
我要提问
如果你遇到有趣的面试题，或者有想知道的前端面试题，可以在下面的小程序提问，收到问题后会在第一时间为你解答。
我要出题
学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。
